tweaks to borders and loading spinner

tom-james-watson · Oct 29, 2021 · a2cb811 · a2cb811
1 parent ea24f68
commit a2cb811
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 12 deletions.
diff --git a/components/board.tsx b/components/board.tsx
@@ -114,11 +114,6 @@ export default function Board(props: Props) {
     <DragDropContext
       onDragEnd={onDragEnd}
       onDragStart={onDragStart}
-      onDragUpdate={() => {
-        setTimeout(() => {
-          // debugger;
-        }, 1000);
-      }}
       sensors={[useAutoMoveSensor.bind(null, state)]}
     >
       <div className={styles.wrapper}>

diff --git a/components/loading.tsx b/components/loading.tsx
@@ -6,7 +6,7 @@ export default function Loading() {
   return (
     <div className={styles.loading}>
       <h1>Loading</h1>
-      <Loader type="Oval" color="#ffffff" height={80} width={80} />
+      <Loader type="Oval" color="#006699" height={60} width={60} />
     </div>
   );
 }
diff --git a/styles/button.module.scss b/styles/button.module.scss
@@ -5,11 +5,12 @@
   background: $primary;
   color: $text-light;
   padding: 10px;
-  border-radius: 5px;
+  border-radius: 20px;
   cursor: pointer;
   text-transform: uppercase;
   font-weight: 700;
-  transform: skewX(-12deg);
+  font-style: italic;
+  padding: 10px 24px;
 
   &:hover {
     filter: brightness(1.3);

diff --git a/styles/item-card.module.scss b/styles/item-card.module.scss
@@ -18,7 +18,7 @@
     right: 0;
     left: 0;
     bottom: 0;
-    border-radius: 5px;
+    border-radius: $box-border-radius;
     box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
       rgba(0, 0, 0, 0.23) 0px 6px 6px;
     background-color: #ffffff;
@@ -31,7 +31,7 @@
       width: 100%;
       height: 100%;
       opacity: 0;
-      border-radius: 5px;
+      border-radius: $box-border-radius;
       box-shadow: rgba(0, 0, 0, 0.65) 0px 10px 25px,
         rgba(0, 0, 0, 0.75) 0px 6px 12px;
       transition: opacity 0.3s ease-in-out;
@@ -75,7 +75,6 @@
       justify-content: flex-end;
       flex-grow: 1;
       min-height: 0;
-      // border-radius: 0 0 5px 5px;
       background-color: $background-alt;
       background-repeat: no-repeat;
       background-size: cover;
@@ -93,7 +92,7 @@
       font-weight: 700;
       background-color: $primary;
       color: $text-light;
-      border-radius: 0 0 5px 5px;
+      border-radius: 0 0 $box-border-radius $box-border-radius;
       transition: background-color 5s ease-in-out;
 
       &:hover {

diff --git a/styles/variables.scss b/styles/variables.scss
@@ -8,3 +8,4 @@ $dashes: #5c7080;
 $incorrect: #990000;
 $correct: #339966;
 $primary: #006699;
+$box-border-radius: 8px;