Improve home page style on arabic

Author: ahmed0saber

components/algorithmsList/algorithmCard/index.tsx

@@ -20,7 +20,7 @@ export default function AlgorithmCard({ algorithm }: { algorithm: Algorithm }) {
   const t = useTranslation();
 
   return (
-    <Card className={`elevateOnHover ${classes.stretchedCard}`}>
+    <Card className={`AlgorithmCard__div elevateOnHover ${classes.stretchedCard}`}>
       <CardContent>
         <Breadcrumbs>
           {algorithm.categories.map((category) => (

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,7 @@ 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="Jumbo_SearchBar__form" />
             </div>
           </div>
         </div>

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 {

pages/index.module.css

@@ -45,11 +45,11 @@
   margin-top: 20px !important;
   background-color: black !important;
   color: white !important;
-  margin-right: 10px !important;
+  margin-inline-end: 10px !important;
 }
 
 .github svg {
-  margin-right: 7px;
+  margin-inline-end: 7px;
   transform: scale(1.1);
 }
 
@@ -60,7 +60,7 @@
 }
 
 .weblate svg {
-  margin-right: 7px;
+  margin-inline-end: 7px;
   transform: scale(1.1);
 }
 
@@ -71,7 +71,7 @@
 }
 
 .donate svg {
-  margin-right: 5px;
+  margin-inline-end: 5px;
 }
 
 .social > div {

public/locales/en/categories.json

@@ -2,9 +2,9 @@
     "a5": "A 5",
     "activationfunctions": "Activation Functions",
     "ahocorasick": "Aho-Corasick",
-    "ai": "AI",
     "arima": "ARIMA",
     "array": "Array",
+    "associationalgorithms": "Association Algorithms",
     "associativemining": "Associative Mining",
     "audio": "Audio",
     "audiofilters": "Audio Filters",
@@ -20,28 +20,33 @@
     "bit": "Bit",
     "bitmanipulation": "Bit Manipulation",
     "blockchain": "Blockchain",
-    "board": "Board",
     "booleanalgebra": "Boolean Algebra",
     "buffers": "Buffers",
     "cache": "Cache",
     "catalan": "Catalan",
     "cellularautomata": "Cellular Automata",
     "checksum": "Checksum",
     "ciphers": "Ciphers",
+    "classificationalgorithms": "Classification Algorithms",
     "clientserver": "Client Server",
     "cll": "CLL",
+    "clusteringalgorithms": "Clustering Algorithms",
     "cn": "Cn",
     "codewars": "Codewars",
     "coloring": "Coloring",
     "comparison": "Comparison",
     "complementaryfilter": "Complementary Filter",
     "compression": "Compression",
     "computervision": "Computer Vision",
+    "concurrency": "Concurrency",
     "conversions": "Conversions",
     "cosinesimilarity": "Cosine Similarity",
     "cpuschedulingalgorithms": "CPU Scheduling Algorithms",
+    "crdt": "Crdt",
     "crypto": "Crypto",
     "datacompression": "Data Compression",
+    "datamanipulation": "Data Manipulation",
+    "datapreprocessing": "Data Preprocessing",
     "datastructures": "Data Structures",
     "date": "Date",
     "decisiontreeregressionwithkfoldcrossvalidation": "Decision Tree Regression with K-Fold Cross Validation",
@@ -50,17 +55,18 @@
     "devutils": "Devutils",
     "dictionary": "Dictionary",
     "diffiehellman": "Diffiehellman",
+    "digests": "Digests",
     "digitalimageprocessing": "Digital Image Processing",
     "discretemathematics": "Discrete Mathematics",
     "disjointset": "Disjoint Set",
+    "disjointsetunion": "Disjointsetunion",
     "distance": "Distance",
     "distances": "Distances",
     "dithering": "Dithering",
     "divideandconquer": "Divide and Conquer",
     "divisibilityofintegers": "Divisibility of Integers",
     "dynamic": "Dynamic",
     "dynamicarray": "Dynamic Array",
-    "dynamiccoinchange": "Dynamic Coin Change",
     "dynamicprogramming": "Dynamic Programming",
     "edgedetection": "Edge Detection",
     "electronics": "Electronics",
@@ -76,7 +82,6 @@
     "fractals": "Fractals",
     "fundamentalsofpython": "Fundamentals of Python",
     "fuzzylogic": "Fuzzy Logic",
-    "gamemodel": "Game Model",
     "games": "Games",
     "ganspytorchvanillalsdc": "GANs-PyTorch-Vanilla-LS-DC",
     "gcd": "Gcd",
@@ -97,31 +102,31 @@
     "heap": "Heap",
     "heaps": "Heaps",
     "histogramequalization": "Histogram Equalization",
+    "http": "Http",
     "imageprocessing": "Image Processing",
-    "ipynbcheckpoints": ".Ipynb Checkpoints",
+    "io": "Io",
     "knapsack": "Knapsack",
-    "leetcode": "Leetcode",
     "levenshtein": "Levenshtein",
     "linearalgebra": "Linear Algebra",
+    "linearprogramming": "Linear Programming",
     "linearregression": "Linear Regression",
     "linkedlist": "Linked List",
     "list": "List",
     "logisticregression": "Logistic-Regression",
     "longestincreasingsubsequence": "Longest Increasing Subsequence",
+    "lossfunction": "Loss Function",
     "lsbbasedimagesteganography": "LSB Based Image Steganography",
     "lstm": "Lstm",
     "machinelearning": "Machine Learning",
     "manacher": "Manacher",
+    "map": "Map",
     "math": "Math",
     "matrix": "Matrix",
     "matrixexponentiation": "Matrix Exponentiation",
     "max": "Max",
     "min": "Min",
-    "minimax": "Minimax",
-    "minimaxplayground": "Minimax.playground",
     "minimizationofpolynomialfunction": "Minimization of Polynomial Function",
     "minimumspanningtree": "Minimum Spanning Tree",
-    "model": "Model",
     "modular": "Modular",
     "modulararithmetic": "Modular Arithmetic",
     "morphologicaloperations": "Morphological Operations",
@@ -140,19 +145,22 @@
     "numericalmethods": "Numerical Methods",
     "numpy": "Numpy",
     "operationsondatastructures": "Operations on Datastructures",
+    "optimization": "Optimization",
     "others": "Others",
+    "paddings": "Paddings",
     "palindrome": "Palindrome",
     "pangram": "Pangram",
     "parsing": "Parsing",
     "particleswarmoptimization": "Particle Swarm Optimization",
     "pascal": "Pascal",
     "password": "Password",
+    "patternmatching": "Pattern Matching",
     "patternsearch": "Pattern Search",
     "permutation": "Permutation",
+    "permutations": "Permutations",
     "physics": "Physics",
     "pi": "PI",
     "piecewise": "Piecewise",
-    "player": "Player",
     "polynomialminimization": "Polynomial Minimization",
     "polynomials": "Polynomials",
     "power": "Power",
@@ -162,14 +170,15 @@
     "problems": "Problems",
     "processschedulingalgorithms": "Process Scheduling Algorithms",
     "projectrosalind": "Project-Rosalind",
-    "prophet": "Prophet",
+    "quantitativefinance": "Quantitative Finance",
     "quantum": "Quantum",
     "queues": "Queues",
     "random": "Random",
     "randomforestclassification": "Random Forest Classification",
     "rangequeries": "Range Queries",
     "recursion": "Recursion",
     "recursive": "Recursive",
+    "regressionalgorithms": "Regression Algorithms",
     "robotics": "Robotics",
     "scheduling": "Scheduling",
     "scripts": "Scripts",
@@ -178,14 +187,17 @@
     "segmenttrees": "Segment Trees",
     "sequences": "Sequences",
     "series": "Series",
+    "set": "Set",
     "shufflers": "Shufflers",
     "sieveoferatosthenes": "Sieve of Eratosthenes",
+    "similarity": "Similarity",
     "slidingwindow": "Sliding Window",
     "sortedset": "Sorted Set",
     "sorts": "Sorts",
-    "sources": "Sources",
     "spanningtree": "Spanning Tree",
     "specializedstructure": "Specialized Structure",
+    "specialnumbers": "Special Numbers",
+    "sqrt": "Sqrt",
     "stablemarriage": "Stable Marriage",
     "stacks": "Stacks",
     "stackwithsinglylinkedlist": "Stack with Singly Linked List",
@@ -194,16 +206,16 @@
     "structure": "Structure",
     "structures": "Structures",
     "sum": "Sum",
-    "test": "Test",
-    "tests": "Tests",
     "textclassification": "Text Classification",
+    "threads": "Threads",
     "timingfunctions": "Timing-Functions",
+    "tls": "Tls",
     "tree": "Tree",
     "trie": "Trie",
     "tries": "Tries",
     "uint53": "Uint 53",
     "utils": "Utils",
     "vectors": "Vectors",
-    "view": "View",
+    "web": "Web",
     "webprogramming": "Web Programming"
 }

styles/globals.css

@@ -129,3 +129,24 @@ 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;
+}