better seed code legibility

diff --git a/resources/js/components/rounds/Item.js b/resources/js/components/rounds/Item.js
index 78e3d1fd9b65d5e58300fc27da19729dc5ca8bf8..10549dd151a5f52048e0fd56c19c0288e55ac92b 100644 (file)
--- a/resources/js/components/rounds/Item.js
+++ b/resources/js/components/rounds/Item.js
@@ -24,7 +24,10 @@ const Item = ({
                </p>
                <p className="seed">
                        {round.code ?
-                               <SeedCode code={round.code} />
+                               <>
+                                       <SeedCode code={round.code} />
+                                       {' '}
+                               </>
                        : null}
                        <SeedButton
                                round={round}

diff --git a/resources/sass/rounds.scss b/resources/sass/rounds.scss
index f258d46fd0f82b7585222be23531b62d61f112d4..0afc0ae1c5fab82f4fa28c92ad96851d90f40e16 100644 (file)
--- a/resources/sass/rounds.scss
+++ b/resources/sass/rounds.scss
@@ -16,19 +16,24 @@
                                font-size: 125%;
                        }
 
-                       .seed-code {
-                               margin: 1rem 0;
+                       .seed-code, .btn {
+                               margin-bottom: 1ex;
                        }
                }
        }
 }
 
 .seed-code {
-       display: flex;
+       display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        justify-content: flex-start;
        gap: 0.5ex;
+       padding: 0.5ex;
+       border-radius: 0.5ex;
+       background: $dark;
+       color: $light;
+       vertical-align: middle;
 }