Small style improvement on promote and demote buttons

public/icons/x.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="18" y1="6" x2="6" y2="18" />
+  <line x1="6" y1="6" x2="18" y2="18" />
+</svg>
+
+

src/styles/components.css

@@ -1,5 +1,22 @@
 /* Generics */
 
+:root {
+  --text-large: 18px;
+  --text-navigation: 16px;
+  --text-medium: 15px;
+  --text-small: 11px;
+
+  --color-title: darkslategray;
+  --color-default: darkslategray;
+  --color-emphasis: darkslateblue;
+  --color-meta: slategray;
+
+  --gap-tiny: 4px;
+  --gap-small: 8px;
+  --gap-medium: 16px;
+  --gap-large: 32px;
+}
+
 .grow {
   flex: 1;
 }
@@ -8,40 +25,58 @@
   overflow-y: auto;
 }
 
+strong {
+  font-weight: bold;
+}
+
+i {
+  color: var(--color-emphasis);
+  font-style: italic;
+}
+
 /* Typography */
 
 .text-navigation {
   color: black;
-  font-size: 16px;
+  font-size: var(--text-navigation);
   font-weight: bold;
 }
 
 .text-title {
-  color: darkslategray;
+  color: var(--color-title);
-  font-size: 18px;
+  font-size: var(--text-large);
   font-weight: bold;
 }
 
 .text-meta {
-  color: slategray;
+  color: var(--color-meta);
   font-family: monospace;
-  font-size: 11px;
+  font-size: var(--text-small);
   text-transform: uppercase;
 }
 
 .text-details {
-  color: darkslategray;
+  color: var(--color-default);
-  font-size: 15px;
+  font-size: var(--text-medium);
   line-height: 1.3rem;
 }
 
 .text-error {
   color: brown;
   font-family: monospace;
-  font-size: 11px;
+  font-size: var(--text-small);
   text-transform: uppercase;
 }
 
+.link {
+  color: blue;
+  text-decoration: underline;
+}
+
+.link:hover {
+  color: lightblue;
+}
+
 /* Page */
 
 .page {
@@ -49,7 +84,7 @@
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 64px calc(100vh - 72px); /* Is there a keyword solution for this? */
-  grid-gap: 8px;
+  grid-gap: var(--gap-small);
   height: 100vh;
   margin: auto;
   max-width: 800px;
@@ -112,12 +147,32 @@
   background-color: slategray;
 }
 
+/* Promote / Demote buttons */
+
+.promote-button {
+  background-color: powderblue;
+}
+
+.promote-button:hover {
+  background-color: darkseagreen;
+}
+
+.demote-button {
+  background-color: thistle;
+}
+
+.demote-button:hover {
+  background-color: rosybrown;
+}
+
+/* Icon buttons */
+
 .icon-button {
   display: flex;
   align-items: center;
   justify-content: middle;
   flex-shrink: 0;
-  padding: 4px;
+  padding: var(--gap-tiny);
   border: 1px solid rgba(0, 0, 0, 0);
   border-radius: 8px;
 }
@@ -133,7 +188,7 @@
   background-color: lavender;
   border: 1px solid darkslategray;
   box-shadow: 0px 5px 5px -5px darkslategray;
-  padding: 16px;
+  padding: var(--gap-medium);
 }
 
 .content-row {
@@ -149,44 +204,48 @@
 }
 
 .content-list > * + * {
-  margin-top: 16px;
+  margin-top: var(--gap-medium);
 }
 
 .content-query {
   display: flex;
   flex-direction: column;
   margin: auto;
-  padding: 30px 16px;
+  padding: 30px var(--gap-medium);
 }
 
 .content-query > label {
-  margin: 10px 0px;
+  margin: var(--gap-medium) 0px;
 }
 
 /* Margins and paddings */
 
 .padding-small {
-  padding: 8px 16px;
+  padding: var(--gap-small) var(--gap-medium);
 }
 
 .margin-small {
-  margin: 10px 0px;
+  margin: var(--gap-small) 0px;
+}
+
+.margin-title {
+  margin: var(--gap-large) 0px var(--gap-small);
 }
 
 .margin-paragraph {
-  margin: 20px 0px 10px;
+  margin: var(--gap-medium) 0px var(--gap-small);
 }
 
 /* Expression set page */
 
 .page-with-padding {
-  padding: 8px 16px 16px;
+  padding: var(--gap-small) var(--gap-medium) var(--gap-medium);
 }
 
 .page-with-bottom-navigation {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: calc(100% - 88px) 80px;
-  grid-gap: 8px;
+  grid-gap: var(--gap-small);
   height: 100%;
 }

src/styles/wiktionary.css

@@ -1,36 +1,24 @@
-.wiktionary-content:first-child {
+.wiktionary-content h2,
-  margin-top: 0 !important;
+h3,
-}
+h4 {
-
+  color: var(--color-title);
-.wiktionary-content h3 {
+  font-size: var(--text-large);
-  font-size: 18px;
+  margin: var(--gap-medium) 0;
-  margin: 14px 0px;
+  line-height: 1.3rem;
-}
-
-.wiktionary-content h4 {
-  font-size: 18px;
-  margin: 14px 0px;
-}
-
-.wiktionary-content p {
-  margin: 10px 0px;
-}
-
-.wiktionary-content strong {
-  font-weight: bold;
-}
-
-.wiktionary-content i {
-  color: darkslateblue;
-  font-style: italic;
 }
 
 .wiktionary-content ol {
   padding-left: 16px;
   list-style: decimal;
+  margin: var(--gap-small) 0;
 }
 
 .wiktionary-content ul {
   padding-left: 16px;
   list-style: disc;
+  margin: var(--gap-small) 0;
+}
+
+.wiktionary-content li {
+  margin: var(--gap-small) 0;
 }

src/views/ExpressionPracticeView/DemoteExpressionButton.tsx

@@ -42,9 +42,10 @@ export function DemoteExpressionButton({
   ]);
   return (
     <button
-      className="navigation-item bottom text-navigation grow"
+      className="navigation-item demote-button bottom text-navigation grow"
       onClick={handleClick}
     >
+      <img src="/icons/x.svg" width="24" height="24" alt="" />
       <span>Wrong</span>
     </button>
   );

src/views/ExpressionPracticeView/PromoteExpressionButton.tsx

@@ -21,9 +21,10 @@ export function PromoteExpressionButton({
 
   return (
     <button
-      className="navigation-item bottom text-navigation grow"
+      className="navigation-item promote-button bottom text-navigation grow"
       onClick={handleClick}
     >
+      <img src="/icons/check.svg" width="24" height="24" alt="" />
       <span>Right</span>
     </button>
   );