update the UI as per the Figma design

Author: Almoizs-1310

src/client/components/button.module.css

@@ -1,7 +1,9 @@
 .buttonPrimary {
-  font-family: 'Commissioner', sans-serif;
-  font-size: 14px;
-  line-height: 1.25rem;
+  font-family: 'Recursive', sans-serif;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0%;
   width: 100%;
   height: 36px;
   padding: 6px 16px;
@@ -14,6 +16,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  vertical-align: middle;
 }
 
 .buttonPrimary:hover {
@@ -23,16 +26,19 @@
 }
 
 .button {
-  font-family: 'Commissioner', sans-serif;
-  font-size: 14px;
-  line-height: 1.25rem;
+  font-family: 'Recursive', sans-serif;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0%;
   padding: 0.5rem;
   outline: none;
   border-radius: 0.375rem;
   border: none;
   background-color: #E80962;
   cursor: pointer;
   color: white;
+  vertical-align: middle;
 }
 
 .button:hover {
@@ -55,4 +61,41 @@
   border-color: rgb(207, 207, 211);
 }
 
+.buttonLogout {
+  font-family: 'Recursive', sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 24px;
+  letter-spacing: 0%;
+  width: 100%;
+  height: 52px;
+  padding: 14px;
+  outline: none;
+  border-radius: 6px;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  color: #444746;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  opacity: 1;
+  vertical-align: middle;
+  transition: all 0.2s ease;
+}
+
+.buttonLogout:hover {
+  background-color: rgba(68, 71, 70, 0.1);
+  color: #1E1A2E;
+  transition: all 0.2s ease;
+}
+
+.buttonLogout:active {
+  background-color: rgba(68, 71, 70, 0.2);
+  color: #1E1A2E;
+  transform: translateY(1px);
+  transition: all 0.1s ease;
+}
+
 

src/client/components/button.tsx

@@ -8,7 +8,7 @@ interface ButtonProps {
   disabled?: boolean;
   style?: React.CSSProperties;
   loading?: boolean;
-  variant?: 'primary' | 'secondary';
+  variant?: 'primary' | 'secondary' | 'logout';
   icon?: React.ReactNode;
 }
 
@@ -22,9 +22,15 @@ const Button: FunctionComponent<ButtonProps> = ({
   icon,
   ...rest
 }) => {
+  const getButtonClassName = () => {
+    if (variant === 'primary') return styles.buttonPrimary;
+    if (variant === 'logout') return styles.buttonLogout;
+    return styles.button;
+  };
+
   return (
     <button
-      className={`${variant === 'primary' ? styles.buttonPrimary : styles.button} ${loading ? styles.buttonLoading : ''} `}
+      className={`${getButtonClassName()} ${loading ? styles.buttonLoading : ''} `}
       style={style}
       onClick={onClick}
       disabled={disabled}

src/client/create-diagram-dialog/components/create-diagram-dialog.tsx

@@ -17,7 +17,7 @@ const CreateDiagramDialog = () => {
   useEffect(() => {
     if (!authState?.authorized) return;
     const url = buildUrl(
-      '/app/diagrams/new?pluginSource=googledocs&shouldShowPopup=true',
+      '/app/diagrams/new?pluginSource=googledocs',
       authState.token
     );
     setDiagramsUrl(url);