fix: styles error, add stylelint

.stylelintrc

@@ -1,7 +1,9 @@
 {
+    "extends": ["stylelint-config-standard"],
     "customSyntax": "postcss-styled-syntax",
     "plugins": ["stylelint-plugin-styled-components"],
     "rules": {
-        "plugin/styled-components-enforce-ampersand": true
+        "plugin/styled-components-enforce-ampersand": true,
+        "named-grid-areas-no-invalid": null
     }
 }

package.json

@@ -79,6 +79,7 @@
         "postcss-styled-syntax": "^0.6.4",
         "prettier": "^2.7.1",
         "stylelint": "^16.5.0",
+        "stylelint-config-standard": "^36.0.0",
         "stylelint-plugin-styled-components": "^1.0.1",
         "tailwindcss": "^3.3.6",
         "vite": "^3.1.8"
@@ -90,7 +91,8 @@
     },
     "lint-staged": {
         "*.{js,jsx}": [
-            "eslint --cache --fix"
+            "eslint --cache --fix",
+            "stylelint --fix"
         ],
         "*.{js,jsx,css,md}": "prettier --write"
     },

src/App.jsx

@@ -132,7 +132,7 @@ const App = () => {
             <Container>
                 {!hideHomeHeader() && (
                     <>
-                        <Sidebar $isOpen={isOpen} toggle={toggle} />
+                        <Sidebar isOpen={isOpen} toggle={toggle} />
                         <Navbar toggle={toggle} />
                         {user ? <ChatBox /> : null}
                     </>

src/components/AIChat/AIChatElements.jsx

@@ -4,19 +4,15 @@ export const AIChatContainer = styled.div`
     display: flex;
     justify-content: space-between;
     gap: 10px;
-
     flex-direction: row;
-
     max-width: 1500px;
     width: 100%;
     margin: 0 auto;
-
     height: 80vh;
 
-    //padding: 20px;
-
+    /* padding: 20px; */
     border-radius: 10px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
 `;
 
 export const Divider = styled.div`
@@ -26,10 +22,10 @@ export const Divider = styled.div`
     align-items: center;
     width: 1px;
     height: 100%;
-    background: rgba(42, 42, 42, 0.35);
+    background: rgb(42 42 42 / 35%);
     padding: 5px;
     border-radius: 10px;
-    border: rgba(42, 42, 42, 0.78) 1px solid;
+    border: rgb(42 42 42 / 78%) 1px solid;
 `;
 
 export const ToggleSection = styled.p`
@@ -52,15 +48,17 @@ export const ToggleSection = styled.p`
 
 export const ChatBox = styled.div`
     display: flex;
-    background: #111111;
+    background: #111;
     flex-direction: column;
     justify-content: space-between;
-    border: 1px solid rgba(70, 70, 70, 0.55);
-    //border-radius: 10px;
-    border-radius: 0 10px 10px 0px;
+    border: 1px solid rgb(70 70 70 / 55%);
+
+    /* border-radius: 10px; */
+    border-radius: 0 10px 10px 0;
     font-size: 18px;
     width: 100%;
-    //max-width: 1100px;
+
+    /* max-width: 1100px; */
     gap: 25px;
     padding: 25px;
 `;
@@ -88,12 +86,10 @@ export const ChatTitle = styled.p`
 
 export const ChatInput = styled.form`
     display: flex;
-
     gap: 10px;
 
     input {
         padding: 10px 15px;
-
         flex: 1;
         background: #1a1c1d;
         color: #fff;
@@ -150,17 +146,14 @@ export const UserMessage = styled.div`
     background: #1e1e1e; /* vote kabir */
     align-self: flex-end;
     border: 1px solid #333;
-
     margin-top: 10px;
     border-radius: 10px 1px 0 0;
     font-size: 18px;
     font-weight: bold;
     padding: 15px 20px;
-
     color: #afafaf; /* Light gray or white */
-    font-family: "Roboto", sans-serif;
+    font-family: Roboto, sans-serif;
     line-height: 1.5;
-
     width: 100%;
 
     .message-content {

src/components/AIChat/RecentChatsElements.jsx

@@ -9,12 +9,14 @@ export const RecentChatsContainer = styled.div`
     max-width: 400px;
     min-width: 400px;
     padding: 10px 25px;
-    background: #111111; /* Adjusted background color */
+    background: #111; /* Adjusted background color */
     color: #fff;
-    border: 1px solid rgba(70, 70, 70, 0.55);
-    //border: 1px solid #464646;
-    //border-radius: 10px; /* Increased border-radius for a softer look */
-    border-radius: 10px 0px 0px 10px;
+    border: 1px solid rgb(70 70 70 / 55%);
+
+    /* border: 1px solid #464646; */
+
+    /* border-radius: 10px; Increased border-radius for a softer look */
+    border-radius: 10px 0 0 10px;
     font-size: 18px;
 
     .chat-title {
@@ -42,7 +44,7 @@ export const RecentChatsHeader = styled.div`
     height: 100%;
     max-height: 100px;
     padding: 0 0 0 10px;
-    border-bottom: 1px solid rgba(70, 70, 70, 0.75);
+    border-bottom: 1px solid rgb(70 70 70 / 75%);
 
     p {
         background: #ff6b08;

src/components/Blogs/BlogCard/BlogCardElements.jsx

@@ -6,7 +6,7 @@ export const ContainerCard = styled.div`
     flex-direction: column;
     width: 100%;
     text-align: start;
-    background: #111111;
+    background: #111;
     justify-content: space-between;
     border-radius: 5px;
     transition: 0.3s ease-in-out;
@@ -76,7 +76,6 @@ export const BlogCardImage = styled.img`
     height: auto;
     object-fit: cover;
     max-height: 300px;
-
     display: block;
     margin: 0 auto;
     border-radius: 15px 15px 0 0;
@@ -93,7 +92,8 @@ export const MainSection = styled.div`
 
 export const SubSection = styled.div`
     padding: 25px;
-    @media screen and (max-width: 600px) {
+
+    @media screen and (width <= 600px) {
         padding: 10px 10px 15px 15px;
     }
 `;
@@ -122,31 +122,36 @@ export const Title = styled.div`
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 5px;
-
     word-wrap: break-word;
-    @media screen and (max-width: 760px) {
+
+    @media screen and (width <= 760px) {
         font-size: 16px;
     }
-    @media screen and (max-width: 760px) {
+
+    @media screen and (width <= 760px) {
         font-size: 12px;
     }
 `;
 
 export const Description = styled.div`
     word-wrap: break-word;
-    @media screen and (max-width: 760px) {
+
+    @media screen and (width <= 760px) {
         font-size: 14px;
     }
-    @media screen and (max-width: 600px) {
+
+    @media screen and (width <= 600px) {
         font-size: 11px;
     }
-    @media screen and (max-width: 460px) {
+
+    @media screen and (width <= 460px) {
         display: none;
     }
 `;
 export const Username = styled.p`
     padding: 0 5px 0 0;
-    @media screen and (max-width: 600px) {
+
+    @media screen and (width <= 600px) {
         font-size: 10px;
     }
 `;
@@ -159,7 +164,8 @@ export const Categories = styled.div`
     display: flex;
     flex-wrap: wrap;
     word-wrap: break-word;
-    @media screen and (max-width: 600px) {
+
+    @media screen and (width <= 600px) {
         margin-left: 15px;
     }
 `;
@@ -176,7 +182,7 @@ export const Category = styled.p`
         transform: scale(1.02);
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (width <= 600px) {
         font-size: 10px;
     }
 `;

src/components/Blogs/BlogCard/LoadingBlogCardElements.jsx

@@ -23,7 +23,7 @@ export const animate = keyframes`
 export const LoadingContainer = styled.div`
     background: #232323;
     width: 100%;
-    margin: 0 0 10px 0;
+    margin: 0 0 10px;
     overflow: hidden;
     border-radius: 5px;
 `;

src/components/Blogs/BlogComments/AddCommentFormElements.jsx

@@ -22,15 +22,14 @@ export const Form = styled.form`
     border-radius: 10px;
 `;
 
-export const Label = styled.label``;
-
 export const TextArea = styled.textarea`
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
-    //border-radius: 5px;
-    //padding: 10px;
+
+    /* border-radius: 5px;
+    padding: 10px; */
     background: transparent;
     border: transparent;
     color: #f5f5f5;
@@ -91,5 +90,5 @@ export const Submit = styled.button`
     width: 100%;
     cursor: pointer;
     font-size: 13px;
-    font-family: "Roboto", sans-serif;
+    font-family: Roboto, sans-serif;
 `;

src/components/Blogs/BlogComments/ViewCommentsElements.jsx

@@ -57,7 +57,8 @@ export const Comment = styled.p`
     max-width: 600px;
     word-wrap: break-word;
     border-radius: 5px;
-    @media screen and (max-width: 600px) {
+
+    @media screen and (width <= 600px) {
         width: 100%;
         padding: 5px 10px;
         font-size: 12px;

src/components/Blogs/BlogSidebar/LeftBlogSidebarElements.jsx

@@ -10,12 +10,13 @@ export const LeftBlogSidebarContainer = styled.div`
     color: #e8e6e3;
     display: flex;
     flex-direction: column;
-    //height: 600px;
-    //min-width: 250px;
+
+    /* height: 600px;
+    min-width: 250px; */
     align-items: flex-start;
     justify-content: flex-start;
 
-    @media screen and (max-width: 970px) {
+    @media screen and (width <= 970px) {
         width: auto;
         min-width: auto;
     }
@@ -31,6 +32,7 @@ export const ExploreHeading = styled.p`
     gap: 10px;
     transition: 0.3s ease-in-out;
     color: #fff;
+
     &:hover {
         scale: 1.1;
         transition: 0.3s ease-in-out;

src/components/Blogs/BlogSidebar/RightBlogSidebar.jsx

@@ -6,14 +6,14 @@ import {
     SeeAll,
     TrendingBlogs,
 } from "src/components/Blogs/BlogSidebar/RightBlogSidebarElements";
-import { SubContainerHeading, SubContainerTop } from "src/components/Blogs/BlogsElements";
+import { SubContainerTop } from "src/components/Blogs/BlogsElements";
 
 const RightBlogSidebar = () => {
     return (
         <RightBlogSidebarContainer>
             <BlogStatus>
                 <SubContainerTop>
-                    <SubContainerHeading> Blog Status </SubContainerHeading>
+                    <h4> Blog Status </h4>
                     <SeeAll to={"/dashboard"}> Dashboard </SeeAll>
                 </SubContainerTop>
                 Pageviews Articles Appreciations <br />
@@ -22,13 +22,13 @@ const RightBlogSidebar = () => {
 
             <DraftStatus>
                 <SubContainerTop>
-                    <SubContainerHeading> Drafts (2) </SubContainerHeading>
+                    <h4> Drafts (2) </h4>
                     <SeeAll to={"/dashboard/drafts"}> See all </SeeAll>
                 </SubContainerTop>
             </DraftStatus>
             <TrendingBlogs>
                 <SubContainerTop>
-                    <SubContainerHeading> Trending </SubContainerHeading>
+                    <h4> Trending </h4>
                     <SeeAll to={"trending"}> See all </SeeAll>
                 </SubContainerTop>
             </TrendingBlogs>