Facelift: Modals UI review on Dashboard (#6943)

* Adjust colors and type style of notification menu on Dashboard

* Adjust Preference Modal type and styles

* Revert change on element.js

* fix: use buttons for sidebar

Co-authored-by: Alex Moldovan <[email protected]>

Author: lenasmayor

packages/app/src/app/components/Notifications/Content.tsx

@@ -112,12 +112,9 @@ export const NotificationsContent = props => {
   return (
     <Element
       css={css({
-        backgroundColor: 'sideBar.background',
+        backgroundColor: 'menuList.background',
         fontFamily: 'Inter',
         width: 321,
-        borderWidth: 1,
-        borderStyle: 'solid',
-        borderColor: 'sideBar.border',
       })}
       {...props}
     >
@@ -126,13 +123,11 @@ export const NotificationsContent = props => {
         css={css({
           display: 'grid',
           gridTemplateColumns: '1fr 60px',
-          borderWidth: 0,
-          borderBottomWidth: 1,
-          borderStyle: 'solid',
-          borderColor: 'sideBar.border',
         })}
       >
-        <Text weight="bold">Notifications</Text>
+        <Text weight="regular" size={4}>
+          Notifications
+        </Text>
         <Element>
           {userNotifications.notifications ? <Filters /> : null}
         </Element>

packages/app/src/app/pages/common/Modals/Common/Alert.tsx

@@ -33,7 +33,7 @@ export const Alert: FunctionComponent<Props> = ({
     {...props}
   >
     {title && (
-      <Text weight="bold" block size={6} paddingBottom={2}>
+      <Text weight="regular" block size={5} paddingBottom={4}>
         {title}
       </Text>
     )}

packages/app/src/app/pages/common/Modals/DeploymentModal/index.tsx

@@ -35,7 +35,13 @@ export const DeploymentModal: FunctionComponent = () => {
     >
       {url ? (
         <Element marginBottom={4}>
-          <Text weight="bold" block size={4} align="center" paddingBottom={4}>
+          <Text
+            weight="regular"
+            block
+            size={4}
+            align="center"
+            paddingBottom={4}
+          >
             Deployed!
           </Text>
           <Link variant="muted" block size={3} align="center" href={url}>

packages/app/src/app/pages/common/Modals/MoveSandboxFolderModal/index.tsx

@@ -75,7 +75,7 @@ export const MoveSandboxFolderModal: FunctionComponent = () => {
           gap={6}
           direction="vertical"
         >
-          <Text size={6} weight="bold">
+          <Text size={6} weight="regular">
             Move {modals.moveSandboxModal.sandboxIds.length}{' '}
             {modals.moveSandboxModal.sandboxIds.length > 1 ? 'items' : 'item'}
           </Text>

packages/app/src/app/pages/common/Modals/PilotPaymentModal/index.tsx

@@ -78,7 +78,7 @@ export const PilotPaymentModal: FunctionComponent = () => {
         })}
       >
         <Element>
-          <Text block marginBottom={6} size={4} weight="bold">
+          <Text block marginBottom={6} size={4} weight="regular">
             Payment Info
           </Text>
 

packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx

@@ -8,7 +8,7 @@ import { EditorTheme } from './EditorTheme';
 
 export const Appearance: FunctionComponent = () => (
   <div>
-    <Text block marginBottom={6} size={4} weight="bold">
+    <Text block marginBottom={6} size={4} weight="regular">
       Appearance
     </Text>
 

packages/app/src/app/pages/common/Modals/PreferencesModal/CodeFormatting/index.tsx

@@ -6,7 +6,7 @@ import { Prettier } from './Prettier';
 
 export const CodeFormatting: FunctionComponent = () => (
   <>
-    <Text block marginBottom={4} size={4} variant="muted" weight="bold">
+    <Text block marginBottom={4} size={4} variant="muted" weight="regular">
       Prettier Settings{' '}
       <a
         href="https://prettier.io/docs/en/options.html"

packages/app/src/app/pages/common/Modals/PreferencesModal/Editor/Editor.tsx

@@ -8,7 +8,7 @@ import { VimModeSettings } from './VimModeSettings';
 
 export const Editor: React.FC = () => (
   <>
-    <Text block marginBottom={6} size={4} weight="bold">
+    <Text block marginBottom={6} size={4} weight="regular">
       Editor
     </Text>
 

packages/app/src/app/pages/common/Modals/PreferencesModal/Experiments/index.tsx

@@ -7,7 +7,7 @@ import { ContainerLSP } from './ContainerLSP';
 
 export const Experiments: FunctionComponent = () => (
   <>
-    <Text block marginBottom={6} size={4} weight="bold">
+    <Text block marginBottom={6} size={4} weight="regular">
       Experiments
     </Text>
 

packages/app/src/app/pages/common/Modals/PreferencesModal/Integrations/index.tsx

@@ -8,7 +8,7 @@ import { Container } from './elements';
 
 export const Integrations: FunctionComponent = () => (
   <div>
-    <Text block marginBottom={6} size={4} weight="bold">
+    <Text block marginBottom={6} size={4} weight="regular">
       Integrations
     </Text>