Move Arabic global styles to respective css modules

Author: ahmed0saber

components/algorithmsList/algorithmCard/index.tsx

@@ -21,10 +21,12 @@ export default function AlgorithmCard({ algorithm }: { algorithm: Algorithm }) {
 
   return (
     <Card
-      className={`AlgorithmCard__div elevateOnHover ${classes.stretchedCard}`}
+      className={`elevateOnHover ${classes.stretchedCard}`}
     >
       <CardContent>
-        <Breadcrumbs>
+        <Breadcrumbs
+          className={classes.breadcrumbs}
+        >
           {algorithm.categories.map((category) => (
             <Typography
               variant="h6"

components/algorithmsList/algorithmCard/style.module.css

@@ -42,3 +42,8 @@
   flex-direction: column;
   justify-content: space-between;
 }
+
+:global(html[lang=ar]) .breadcrumbs,
+:global(html[lang=ar]) .title {
+  direction: ltr;
+}

components/jumbo/index.tsx

@@ -62,7 +62,7 @@ export default function Jumbo() {
               <SearchBar
                 query={query}
                 setQuery={setQuery}
-                className="Jumbo_SearchBar__form"
+                className={classes.Jumbo_SearchBar}
               />
             </div>
           </div>

components/jumbo/style.module.css

@@ -78,3 +78,14 @@
   width: 400px;
   max-width: 100%;
 }
+
+:global(html[lang=ar]) .Jumbo_SearchBar label[data-shrink]{
+  left: unset;
+  right: 0;
+  transform: translate(-12px, 20px) scale(1);
+  transform-origin: right;
+}
+
+:global(html[lang=ar]) .Jumbo_SearchBar label[data-shrink=true]{
+  transform: translate(-12px, 10px) scale(0.75);
+}

styles/globals.css

@@ -5,6 +5,10 @@ html {
   scroll-padding-top: 100px;
 }
 
+html[lang=ar] {
+  direction: rtl;
+}
+
 html,
 body,
 #__next {
@@ -128,25 +132,4 @@ html::-webkit-scrollbar {
 
 html::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
-}
-
-/* styles for arabic language */
-html[lang=ar] {
-  direction: rtl;
-}
-
-html[lang=ar] .Jumbo_SearchBar__form label[data-shrink]{
-  left: unset;
-  right: 0;
-  transform: translate(-12px, 20px) scale(1);
-  transform-origin: right;
-}
-
-html[lang=ar] .Jumbo_SearchBar__form label[data-shrink=true]{
-  transform: translate(-12px, 10px) scale(0.75);
-}
-
-html[lang=ar] .AlgorithmCard__div nav,
-html[lang=ar] .AlgorithmCard__div h2 {
-  direction: ltr;
 }