Style updates (#231)

* style updates

* more updates

* format

* small changes

src/components/Elements/Buttons/ActionButton/index.module.scss

@@ -1,5 +1,4 @@
 .buttonContainer {
-  background:linear-gradient(180deg, #E84D68 0%, #AD2B49 100%);
   border-radius: 100px;
   font-weight: 500;
   text-transform: none;

src/components/Elements/Buttons/ProgressButton/index.module.scss

@@ -1,8 +1,7 @@
 .buttonContainer {
-  background: linear-gradient(180deg, #e84d68 0%, #ad2b49 100%);
   border-radius: 100px;
   font-weight: 500;
   text-transform: none;
   padding: 0.5rem 1.25rem;
   font-size: 0.8rem;
-}
+}

src/components/Elements/Cards/index.ts

@@ -1,2 +1 @@
-export * from './FeatureCard';
 export * from './SalePhaseCard';

src/components/Elements/CountDown/index.tsx

@@ -67,7 +67,7 @@ export const CountDown = ({ remainingTime }: CountDownProps) => {
     <Stack direction='row' gap='0.5rem'>
       <CountdownCircleTimer
         {...timerProps}
-        colors='#64A537'
+        colors={`${theme.palette.success.main}` as any}
         duration={daysDuration}
         initialRemainingTime={remainingTime}
       >
@@ -79,7 +79,7 @@ export const CountDown = ({ remainingTime }: CountDownProps) => {
       </CountdownCircleTimer>
       <CountdownCircleTimer
         {...timerProps}
-        colors='#64A537'
+        colors={`${theme.palette.success.main}` as any}
         duration={daySeconds}
         initialRemainingTime={remainingTime % daySeconds}
         onComplete={(totalElapsedTime) => ({
@@ -94,7 +94,7 @@ export const CountDown = ({ remainingTime }: CountDownProps) => {
       </CountdownCircleTimer>
       <CountdownCircleTimer
         {...timerProps}
-        colors='#64A537'
+        colors={`${theme.palette.success.main}` as any}
         duration={hourSeconds}
         initialRemainingTime={remainingTime % hourSeconds}
         onComplete={(totalElapsedTime) => ({
@@ -109,7 +109,7 @@ export const CountDown = ({ remainingTime }: CountDownProps) => {
       </CountdownCircleTimer>
       <CountdownCircleTimer
         {...timerProps}
-        colors='#64A537'
+        colors={`${theme.palette.success.main}` as any}
         duration={minuteSeconds}
         initialRemainingTime={remainingTime % minuteSeconds}
         onComplete={(totalElapsedTime) => ({

src/components/Layout/Sidebar/index.tsx

@@ -181,7 +181,7 @@ export const Sidebar = () => {
             <Box
               key={index}
               sx={{
-                color: theme.palette.text.secondary,
+                color: theme.palette.text.primary,
                 textTransform: 'capitalize',
               }}
             >

src/components/Panels/CoreDetailsPanel/index.tsx

@@ -41,7 +41,7 @@ const DetailItem = ({ label, description, value, dataCy }: DetailItemProps) => {
         <Typography
           sx={{
             fontSize: '0.8rem',
-            color: theme.palette.text.secondary,
+            color: theme.palette.text.primary,
             fontWeight: 700,
             lineHeight: 1,
           }}

src/components/Panels/SaleInfoPanel/index.tsx

@@ -101,7 +101,7 @@ export const SaleInfoPanel = () => {
               className={styles.buttonWrapper}
               sx={{
                 background: '#e8eff7',
-                color: theme.palette.text.secondary,
+                color: theme.palette.text.primary,
               }}
               data-cy='btn-analyze-price'
             >

src/components/Panels/SalePhaseInfoPanel/index.tsx

@@ -50,8 +50,8 @@ export const SalePhaseInfoPanel = () => {
             variant='text'
             className={styles.buttonWrapper}
             sx={{
-              background: '#e8eff7',
-              color: theme.palette.text.secondary,
+              background: theme.palette.grey[100],
+              color: theme.palette.text.primary,
             }}
             onClick={() => openHistoryModal(true)}
             data-cy='btn-purchase-history'

src/components/Regions/RegionMetaCard/index.tsx

@@ -117,12 +117,12 @@ const RegionCardInner = ({
     {
       label: 'Core Occupancy',
       value: coreOccupancy ?? 0,
-      color: 'warning',
+      color: 'success',
     },
     {
       label: 'Consumed',
       value: consumed ?? 0,
-      color: 'success',
+      color: 'warning',
     },
     {
       label: 'Current Usage',

src/pages/_document.tsx

@@ -11,11 +11,7 @@ export default class MyDocument extends Document {
         <Head>
           <link rel='icon' href='/favicon.ico' />
 
-          {/* default style for MUI is Roboto */}
-          <link
-            rel='stylesheet'
-            href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap'
-          />
+          <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' />
           {/* Inject MUI styles first to match with the prepend: true configuration. */}
           {(this.props as any).emotionStyleTags}
         </Head>

src/pages/index.tsx

@@ -21,10 +21,10 @@ import { getBalanceString } from '@/utils/functions';
 
 import { PurchaseHistoryTable } from '@/components';
 
-import Chart from '@/assets/chart.png';
-import Config from '@/assets/config.png';
-import Manage from '@/assets/manage.png';
-import Trade from '@/assets/trade.png';
+import Chart from '@/assets/chart.svg';
+import Config from '@/assets/config.svg';
+import Manage from '@/assets/manage.svg';
+import Trade from '@/assets/trade.svg';
 import { useCoretimeApi } from '@/contexts/apis';
 import { ApiState } from '@/contexts/apis/types';
 import { useNetwork } from '@/contexts/network';
@@ -265,6 +265,7 @@ const Home = () => {
               background: theme.palette.common.white,
               color: theme.palette.common.black,
               borderRadius: '0.75rem',
+              borderColor: theme.palette.grey[200],
               py: '1.25rem',
               flex: '1 0 0',
             }}

src/pages/regions.tsx

@@ -191,7 +191,7 @@ const Dashboard = () => {
         <Paper
           sx={{
             borderRadius: '.5rem',
-            color: theme.palette.text.secondary,
+            color: theme.palette.text.primary,
             minWidth: '18rem',
             padding: '2rem 3rem',
             maxHeight: '32.5rem',

src/utils/muiTheme.ts

@@ -15,27 +15,27 @@ let theme = createTheme({
       default: '#f6f7fa',
     },
     primary: {
-      contrastText: '#ecedef',
-      main: '#3868a9',
+      contrastText: '#f6f7fa',
+      main: '#3758F9',
     },
     success: {
-      main: '#68a938',
+      main: '#13C296',
     },
     grey: {
       100: '#eeeff4',
       200: '#8c8c8c',
     },
     text: {
-      primary: '#7e8591',
-      secondary: '#3868a9',
+      primary: '#637381',
+      secondary: '#8899A8',
     },
     common: {
       white: '#fff',
     },
     warning: {
-      main: '#A93868',
+      main: '#FCD34D',
     },
-    divider: '#efefef',
+    divider: '#F3F4F6',
   },
   typography: {
     subtitle1: {

styles/global.scss

@@ -1,4 +1,5 @@
-body, html {
+body,
+html {
   height: 100vh;
 }
 
@@ -8,4 +9,6 @@ body, html {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-}
+  font-family: 'Montserrat';
+  font-weight: 600;
+}