Merge pull request #285 from ahmed0saber/improve-website-style-on-arabic

Improve website style on Arabic

Author: maltejur

components/algorithmsList/algorithmCard/index.tsx

@@ -22,7 +22,7 @@ export default function AlgorithmCard({ algorithm }: { algorithm: Algorithm }) {
   return (
     <Card 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/categoriesList/style.module.css

@@ -12,5 +12,5 @@
 }
 
 .text {
-  margin-left: 10px !important;
+  margin-inline-start: 10px !important;
 }

components/footer/style.module.css

@@ -8,15 +8,15 @@
 
 .logo {
   grid-area: logo;
-  margin-right: 40px;
+  margin-inline-end: 40px;
   width: 80px;
   height: 80px;
 }
 
 .list {
   display: flex;
   flex-direction: column;
-  margin-right: 30px;
+  margin-inline-end: 30px;
 }
 
 .list a {

components/jumbo/index.tsx

@@ -59,7 +59,11 @@ export default function Jumbo() {
             </div>
             <Typography className={classes.h2}>{t("welcomeTitle")}</Typography>
             <div className={classes.input}>
-              <SearchBar query={query} setQuery={setQuery} />
+              <SearchBar
+                query={query}
+                setQuery={setQuery}
+                className={classes.Jumbo_SearchBar}
+              />
             </div>
           </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);
+}

components/langSelect/style.module.css

@@ -2,6 +2,11 @@
   z-index: 99999 !important;
 }
 
+.menu [role=menu] {
+  padding-inline-end: 17px;
+  padding-right: 0px !important;
+}
+
 .icon {
   width: 35px;
   height: 25px;

components/languagesList/style.module.css

@@ -3,6 +3,8 @@
   flex-direction: column;
   margin-top: 20px !important;
   margin-bottom: 10px !important;
+  /* direction should stay ltr whatever the user-selected language is */
+  direction: ltr;
 }
 
 .sort,

components/navbar/style.module.css

@@ -42,7 +42,7 @@
 
 .title img {
   height: 1.2em;
-  margin-right: 10px;
+  margin-inline-end: 10px;
 }
 
 .smallTitle {
@@ -56,7 +56,7 @@
 }
 
 .translateIcon {
-  margin-right: 8px;
+  margin-inline-end: 8px;
 }
 
 .toolbar svg {

components/searchBar/index.tsx

@@ -53,7 +53,7 @@ export default function SearchBar({
     // When input value is not null, reset error & empty state to `false`.
     // And also debounce the router push.
     setIsError(false);
-    setIsEmpty(false);  
+    setIsEmpty(false);
   }
 
   function handleSubmit(event?: FormEvent) {