User Experience Improvements:

Buttons are less bright for better contrast

Hyperlink color throughout the app changed so they are easier to see

src/components/common/ImagePublisher/ImagePublisher-styles.tsx

@@ -12,8 +12,8 @@ export const AddCoverImageButton = styled(Button)(({ theme }) => ({
   letterSpacing: "0.2px",
   color: theme.palette.text.primary,
   width: "170px",
-  backgroundColor: "#44c4ff",
+  backgroundColor: "#01A9E9",
-  "&:hover": { backgroundColor: "#01a9e9" },
+  "&:hover": { backgroundColor: "#005C96" },
   gap: "5px",
 }));
 

src/index.css

@@ -3,6 +3,8 @@
   src: url("./styles/fonts/Cambon-Light.ttf") format("truetype");
 }
 
+a:link { color: #8AB4F8}
+
 @font-face {
   font-family: 'Merriweather Sans';
   src: url("./styles/fonts/Merriweather Sans.ttf") format("truetype");

src/pages/Home/Home-styles.tsx

@@ -87,14 +87,14 @@ export const ChannelCard = styled(Grid)(({ theme }) => ({
 
 export const ThemeButton = styled(Button)(({ theme }) => ({
   color: theme.palette.text.primary,
-  backgroundColor: "#01a9e9",
+  backgroundColor: "#008FCD",
   fontSize: "18px",
-  "&:hover": { backgroundColor: "#008fcd" },
+  "&:hover": { backgroundColor: "#0075B1" },
 }));
 
 export const ThemeButtonBright = styled(Button)(({ theme }) => ({
   color: theme.palette.text.primary,
-  backgroundColor: "#44c4ff",
+  backgroundColor: "#01A9E9",
   fontSize: fontSizeSmall,
-  "&:hover": { backgroundColor: "#01a9e9" },
+  "&:hover": { backgroundColor: "#005C96" },
 }));

vite.config.ts

@@ -4,6 +4,7 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: { port: 3000 },
   base: "",
   build: {
     target: "esnext", //browsers can handle the latest ES features