UI fixes for candidate form

ecss-soton · Mar 21, 2024 · 064f87d · 064f87d
1 parent 8752f4a
commit 064f87d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/src/app/_components/VoteCandidate/index.module.scss b/src/app/_components/VoteCandidate/index.module.scss
@@ -14,9 +14,6 @@
   padding-bottom: calc(var(--block-padding) / 2);
 }
 
-.buttonContainer {}
-
-
 .flexContainer {
   display: flex;
   flex-direction: row;
@@ -34,13 +31,22 @@
   width: 100%;
 }
 
+.smallMargin {
+  margin: 0.5em;
+}
+
+.content {
+  margin: 0.5em;
+}
+
 .name {
   padding: 0;
   margin: 0;
   margin-left: 5px;
 }
 
 .image {
+  margin: 0.5em;
   width: auto;
   height: 200px;
 }
@@ -54,6 +60,7 @@
   flex-direction: column;
   justify-content: left;
   align-items: center;
+  margin: 0.5em;
 }
 
 .moveButton {

diff --git a/src/app/_components/VoteCandidate/index.tsx b/src/app/_components/VoteCandidate/index.tsx
@@ -57,17 +57,15 @@ export const VoteCandidate: React.FC<Props> = ({
                 onClick={() => onMoveDown(candidate.id)}
                 disabled={rankPos === ranking.ranked.length - 1}
               />
+              <Button
+                className={classes.moveButton}
+                label="Remove"
+                appearance="secondary"
+                onClick={() => onRemove(candidate.id)}
+              />
             </div>
           )}
-          {rankPos !== -1 && (
-            <Button
-              className={classes.moveButton}
-              label="Remove"
-              appearance="secondary"
-              onClick={() => onRemove(candidate.id)}
-            />
-          )}
-          {rankPos === -1 && (
+          {!isRanked && (
             <Button
               label={`Rank #${ranking.ranked.length + 1}`}
               appearance="secondary"
@@ -80,7 +78,7 @@ export const VoteCandidate: React.FC<Props> = ({
           <Media imgClassName={classes.image} resource={candidate.image} />
         )}
 
-        <div className={classes.content}>
+        <div className={classes.smallMargin}>
           <h3 className={classes.name}>
             {candidate.nickname ||
               candidate.populatedNominees.map(n => n.name.split(' ')[0]).join(' & ')}
@@ -96,6 +94,7 @@ export const VoteCandidate: React.FC<Props> = ({
         <div>
           {candidate.manifesto && (
             <Button
+              className={classes.smallMargin}
               appearance={'primary'}
               label={'Read manifesto'}
               onClick={() => setManifestoOpen(!manifestoOpen)}