SCSS installed

package.json

@@ -12,6 +12,7 @@
     "react-icons": "^4.4.0",
     "react-router-dom": "^6.4.2",
     "react-scripts": "5.0.1",
+    "sass": "^1.60.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -18,7 +18,7 @@ import {
   Vote,
   AddProject,
 } from "./pages";
-import classes from "./App.module.css";
+import classes from "./App.module.scss";
 
 function App() {
   const [activeMenu, setActiveMenu] = useState(true);

src/App.module.scss

@@ -0,0 +1,47 @@
+.container {
+	display: flex;
+}
+
+.body {
+	width: 100%;
+	overflow: hidden;
+}
+
+/* Created an animated css class */
+.animated_padding_in {
+	padding-left: 292px;
+	transition: all 2s ease-out;
+}
+.animated_padding_out {
+	padding-left: 0;
+	transition: all 0.5s ease-out;
+}
+
+.sidebar {
+	background: #2C3137;
+	padding: 24px 18px;
+	width: 256px;
+	height: 100vh;
+	position: fixed;
+}
+
+.navbar {
+	width: 100%;
+	max-width: 1440px;
+	z-index: 10;
+}
+
+
+
+//MEDIA QUERY FOR 1024px
+@media screen and (max-width: 1024px) {
+	.sidebar {
+		box-sizing: border-box;
+		width: 96px;
+		padding: 24px 4px;
+	}
+	.animated_padding_in {
+		padding-left: 96px;
+		transition: all .2s ease-out;
+	}
+}

src/components/AdSuggestion/AdSuggestionForms/Form.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Button from "../../UI/Button/Button";
-import classes from './Form.module.css'
+import classes from './Form.module.scss'
 
 export default function Form(props) {
   return (

src/components/AdSuggestion/AdSuggestionForms/Form.module.scss

@@ -0,0 +1,42 @@
+$color_1: #fff;
+$color_2: #2793ff;
+$background-color_1: #2c3137;
+
+form {
+	width: 389px;
+}
+
+.formInput {
+	display: flex;
+	flex-direction: column;
+}
+
+.cryptoinput {
+	padding: 16px;
+	border-radius: 8px;
+	color: $color_1;
+	font-size: 16px;
+	font-weight: 500;
+	outline: none;
+	border: solid 1px #35373e;
+	background-color: $background-color_1;
+	margin-top: 8px;
+	margin-bottom: 24px;
+}
+
+label {
+	font-size: 18px;
+	font-weight: normal;
+	color: $color_1;
+	p {
+		margin: 0;
+	}
+}
+
+.label__url {
+	font-size: 14px;
+	span {
+		font-weight: bold;
+		color: $color_2;
+	}
+}

src/components/AdSuggestion/AdSuggestionForms/IcoForm.jsx

@@ -1,5 +1,5 @@
 import Button from "../../UI/Button/Button";
-import classes from './Form.module.css'
+import classes from './Form.module.scss'
 
 export default function CryptoForm() {
 

src/components/AdSuggestion/AdSuggestionForms/SuggestAds/SuggestAds.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import classes from "./SuggestAds.module.css";
+import classes from "./SuggestAds.module.scss";
 import arrowback from "../../../../data/arrow-left.png";
 import CryptoForm from "../CryptoForm";
 import IcoForm from "../IcoForm";

src/components/AdSuggestion/AdSuggestionForms/SuggestAds/SuggestAds.module.scss

@@ -0,0 +1,58 @@
+.suggestAd__container {
+  margin: 50px;
+
+  .suggestAd__span {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 35px;
+    img {
+      cursor: pointer;
+    }
+    h3 {
+      font-weight: 800;
+      font-size: 32px;
+    }
+  }
+
+  .projectType {
+    margin: 0;
+    font-weight: 600;
+    font-size: 18px;
+    margin-bottom: 16px;
+  }
+
+  .suggestAd__buttons {
+	display: flex;
+	gap: 8px;
+	margin-bottom: 77px;
+  }
+}
+
+
+::-webkit-calendar-picker-indicator {
+  filter: invert(2);
+}
+
+
+//MEDIA QUERY FOR 1024px
+@media screen and (max-width: 1024px) {
+  .suggestAd__span {
+    img {
+      height: 26.67px;
+      width: 26.67px;
+    }
+    h3 {
+      font-size: 24px;
+    }
+  }
+
+  .suggestAd-buttons {
+    gap: 12px;
+    margin-bottom: 44px;
+    button {
+      font-size: 16px;
+      padding: 12px 16px;
+    }
+  }
+}

src/components/AdSuggestion/AdSuggestionStat/AdSuggestionStatus.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import classes from "./AddSuggestionStatus.module.css";
+import classes from "./AddSuggestionStatus.module.scss";
 import arrowback from "../../../data/arrow-left.png";
 import { suggestionStatus } from "../../../data/data";
 import { NavLink } from "react-router-dom";