Change blue colors and canvas arrow icons

Author: johnwage

app/src/components/StateManagement/CreateTab/components/StatePropsPanel.tsx

@@ -432,7 +432,7 @@ const StatePropsPanel = ({ isThemeLight, data }): JSX.Element => {
             display: 'flex',
             flexDirection: 'column',
             width: `${40}px`,
-            color: '#354E9C',
+            color: '#0671E3',
             justifyContent: 'center'
           }}
         >
@@ -554,7 +554,7 @@ const useStyles = makeStyles((theme: Theme) => ({
     fontSize: '14.5px',
     textAlign: 'center',
     margin: '-20px 0px 5px 150px',
-    border: ' 1px solid #354e9c',
+    border: ' 1px solid #0671E3',
     borderRadius: '8px',
     transition: '0.3s'
   },

app/src/components/bottom/BottomTabs.tsx

@@ -179,7 +179,6 @@ const useStyles = makeStyles((theme) => ({
     flexGrow: 1,
     height: '100%',
     color: '#E8E8E8'
-    // boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)'
   },
   rootLight: {
     backgroundColor: '#0671e3'
@@ -194,15 +193,12 @@ const useStyles = makeStyles((theme) => ({
     minHeight: '50%'
   },
   tabsIndicator: {
-    backgroundColor: '#354e9c' // changed
+    backgroundColor: '#0671E3'
   },
   tabRoot: {
     textTransform: 'initial',
-    minWidth: 170, // changed
-    height: 60, // added
-    // width: '150px',
-    // margin: '0 16px',
-
+    minWidth: 170,
+    height: 60,
     fontFamily: [
       '-apple-system',
       'BlinkMacSystemFont',
@@ -219,10 +215,10 @@ const useStyles = makeStyles((theme) => ({
       color: 'white',
       opacity: 1
     },
-    fontWeight: 300, // added
+    fontWeight: 300,
     '&$tabSelected': {
       color: 'white',
-      backgroundColor: '#2D313A' // added
+      backgroundColor: '#2D313A'
     },
     '&:focus': {
       color: 'white'
@@ -245,9 +241,9 @@ const useStyles = makeStyles((theme) => ({
     marginLeft: '10px'
   },
   projectSelector: {
-    backgroundColor: '#131416', // changed
+    backgroundColor: '#131416',
     color: 'white',
-    margin: '0 10px 10px 0' // added
+    margin: '0 10px 10px 0'
   }
 }));
 

app/src/components/bottom/ChatRoom.tsx

@@ -42,7 +42,7 @@ const Chatroom = (props): JSX.Element => {
   const buttonStyles = {
     padding: '10px',
     marginLeft: '10px',
-    backgroundColor: '#0070BA',
+    backgroundColor: '#0671E3',
     color: 'white',
     border: 'none',
     borderRadius: '5px',

app/src/components/bottom/VideoMeeting.tsx

@@ -211,7 +211,7 @@ const Videomeeting = (props): JSX.Element => {
         {userJoinCollabRoom && userJoinMeetingStatus === null && (
           <Button
             variant="contained"
-            style={{ backgroundColor: '#0070BA' }}
+            style={{ backgroundColor: '#0671E3' }}
             onClick={joinMeeting}
           >
             Join Meeting

app/src/components/bottom/VideoMeetingControl.tsx

@@ -120,11 +120,11 @@ const VideoMeetingControl: React.FC<VideoMeetingControlProps> = () => {
           >
             {useMic ? (
               <MicIcon
-                style={{ fontSize: 36, color: '#0070BA', margin: '0 15px' }}
+                style={{ fontSize: 36, color: '#0671E3', margin: '0 15px' }}
               />
             ) : (
               <MicOffIcon
-                style={{ fontSize: 36, color: '#0070BA', margin: '0 15px' }}
+                style={{ fontSize: 36, color: '#0671E3', margin: '0 15px' }}
               />
             )}
           </button>
@@ -157,11 +157,11 @@ const VideoMeetingControl: React.FC<VideoMeetingControlProps> = () => {
           >
             {useWebcam ? (
               <VideocamIcon
-                style={{ fontSize: 36, color: '#0070BA', margin: '0 15px' }}
+                style={{ fontSize: 36, color: '#0671E3', margin: '0 15px' }}
               />
             ) : (
               <VideocamOffIcon
-                style={{ fontSize: 36, color: '#0070BA', margin: '0 15px' }}
+                style={{ fontSize: 36, color: '#0671E3', margin: '0 15px' }}
               />
             )}
           </button>

app/src/components/left/HTMLPanel.tsx

@@ -343,7 +343,7 @@ const useStyles = makeStyles({
     transition: '0.3s',
     borderRadius: '10px',
     alignSelf: 'end',
-    border: '1px solid #354e9c'
+    border: '1px solid #0671E3'
   },
   lightThemeFontColor: {
     color: 'white',

app/src/components/left/ProfilePage.tsx

@@ -49,7 +49,7 @@ const ProfilePage = () => {
         <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
           Hello,
         </Typography>
-        <Typography variant="h5" component="div" sx={{ color: '#0070BA' }}>
+        <Typography variant="h5" component="div" sx={{ color: '#0671E3' }}>
           {username ? username : 'Guest'}
         </Typography>
         <Typography sx={{ mb: 1.5, marginTop: '7px' }} color="text.secondary">
@@ -90,7 +90,7 @@ const ProfilePage = () => {
         <Button
           size="small"
           sx={{
-            color: '#0070BA',
+            color: '#0671E3',
             textTransform: 'capitalize',
             fontSize: '14px'
           }}
@@ -114,7 +114,7 @@ const ProfilePage = () => {
         <Button
           size="small"
           sx={{
-            color: '#0070BA',
+            color: '#0671E3',
             textTransform: 'capitalize',
             fontSize: '14px'
           }}
@@ -125,7 +125,7 @@ const ProfilePage = () => {
         <Button
           size="small"
           sx={{
-            color: '#0070BA',
+            color: '#0671E3',
             textTransform: 'capitalize',
             fontSize: '14px'
           }}

app/src/components/main/Canvas.tsx

@@ -368,7 +368,7 @@ const Canvas = forwardRef<HTMLDivElement, CanvasProps>(({ zoom }, ref) => {
               color: '#ffffff',
               backgroundColor: '#151515',
               zIndex: 0,
-              border: '2px solid #354e9c',
+              border: '2px solid #0671E3',
               whiteSpace: 'nowrap',
               cursor: 'pointer',
               textTransform: 'none'

app/src/components/main/CanvasContainer.tsx

@@ -6,9 +6,9 @@ import CodePreview from '../bottom/CodePreview';
 import { toggleCodePreview } from '../../redux/reducers/slice/appStateSlice';
 import { Button } from '@mui/material';
 import {
-  ArrowDownward,
-  ArrowUpward,
   DeveloperMode,
+  VerticalAlignBottom,
+  VerticalAlignTop,
   ZoomIn,
   ZoomOut
 } from '@mui/icons-material';
@@ -118,15 +118,15 @@ function CanvasContainer(props: CanvasContainerProps): JSX.Element {
                 container.scrollTop = 0;
               }}
             >
-              <ArrowUpward />
+              <VerticalAlignTop />
             </Button>
             <Button
               style={buttonStyle}
               onClick={() => {
                 container.scrollTop = container.clientHeight;
               }}
             >
-              <ArrowDownward />
+              <VerticalAlignBottom />
             </Button>
             <Button style={buttonStyle} onClick={zoomIn}>
               <ZoomIn />

app/src/components/right/ComponentPanel.tsx

@@ -323,7 +323,7 @@ const useStyles = makeStyles({
     display: 'inline-block'
   },
   rootCheckBox: {
-    borderColor: '#354e9c',
+    borderColor: '#0671E3',
     padding: '7px 0'
   },
   rootCheckBoxLabel: {

app/src/components/top/NavBar.tsx

@@ -61,7 +61,7 @@ const NavBar: React.FC = () => {
   };
 
   const buttonStyle = {
-    backgroundColor: '#354E9C',
+    backgroundColor: '#0671E3',
     border: 'none',
     color: 'white',
     fontSize: '12px',

app/src/public/styles/style.css

@@ -414,8 +414,8 @@ RIGHT COLUMN
 #addComponentButton {
   height: 49px;
   width: 130px;
-  background-color: #354e9c;
-  border: 2px solid #354e9c;
+  background-color: #0671E3;
+  border: 2px solid #0671E3;
   border-radius: 10px;
   font-size: 16.5px;
 }
@@ -776,7 +776,7 @@ div.rst__rowContents {
   bottom: 30px;
   right: 30px;
   z-index: 999;
-  background-color: #354e9c;
+  background-color: #0671E3;
   box-shadow: none;
   padding: 32px;
 }