From c4cb5ac2a6ec9fadf2a48705f18f46ddcab62182 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 29 Nov 2021 14:23:48 +0200
Subject: [PATCH] Add global select styles

---
 .../manage-roster.tsx                         | 18 +++++++++-----
 app/styles/global.css                         | 24 ++++++++++++++++++-
 app/styles/tournament-manage-roster.css       | 21 +++++++++++-----
 3 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/app/routes/to/$organization.$tournament/manage-roster.tsx b/app/routes/to/$organization.$tournament/manage-roster.tsx
index 13f936930..b7de797da 100644
--- a/app/routes/to/$organization.$tournament/manage-roster.tsx
+++ b/app/routes/to/$organization.$tournament/manage-roster.tsx
@@ -35,18 +35,24 @@ export default function ManageRosterPage() {
     <div className="tournament__manage-roster">
       {ownTeam.members.length < 4 && (
         <Alert type="warning">
-          You need at least 4 players in your roster (max 6)
+          You need at least 4 players in your roster to play (max 6)
         </Alert>
       )}
       <TeamRoster team={ownTeam} />
-      <div className="tournament__manage-roster__actions-container">
-        <div>
+      <div className="tournament__manage-roster__actions">
+        <div className="tournament__manage-roster__actions__section">
           <label>Add players you previously played with</label>
-          <select>
+          <select className="tournament__manage-roster__select">
             <option>Sendou#0043</option>
           </select>
+          <button
+            className="tournament__manage-roster__input__button"
+            onClick={() => navigator.clipboard.writeText(urlWithInviteCode)}
+          >
+            Add to roster
+          </button>
         </div>
-        <div>
+        <div className="tournament__manage-roster__actions__section">
           <label htmlFor="inviteCodeInput">
             Share this URL to invite players to your team
           </label>
@@ -57,7 +63,7 @@ export default function ManageRosterPage() {
             value={urlWithInviteCode}
           />
           <button
-            className="tournament__manage-roster__input__copy-button"
+            className="tournament__manage-roster__input__button"
             onClick={() => navigator.clipboard.writeText(urlWithInviteCode)}
           >
             Copy to clipboard
diff --git a/app/styles/global.css b/app/styles/global.css
index 8928f17a8..eef6b394c 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -77,7 +77,7 @@ body {
 }
 
 button {
-  display: inline-flex;
+  display: flex;
   width: auto;
   align-items: center;
   justify-content: center;
@@ -152,6 +152,28 @@ fieldset {
   all: unset;
 }
 
+select {
+  all: unset;
+  padding-block: 3.5px;
+  padding-inline: var(--s-3);
+  border: 1px solid var(--border);
+  width: 90%;
+
+  /* TODO: Get color from CSS var */
+  background-image: url('data:image/svg+xml;utf8,<svg width="1rem" color="rgb(255 255 255 / 55%)" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>');
+  background-position-x: 95%;
+  background-position-y: 50%;
+  background-repeat: no-repeat;
+  border-radius: var(--rounded);
+  cursor: pointer;
+  font-weight: 500;
+}
+
+select::selection {
+  font-weight: bold;
+  overflow: hidden;
+}
+
 .form-validation-error {
   color: var(--theme-error);
   font-size: var(--fonts-xs);
diff --git a/app/styles/tournament-manage-roster.css b/app/styles/tournament-manage-roster.css
index bcfc7f6c0..5b88867db 100644
--- a/app/styles/tournament-manage-roster.css
+++ b/app/styles/tournament-manage-roster.css
@@ -6,17 +6,26 @@
   width: 100%;
 }
 
-.tournament__manage-roster__actions-container {
+.tournament__manage-roster__actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   width: 100%;
 }
 
-.tournament__manage-roster__input {
-  width: min(100%, 45rem);
-  height: 10rem;
+.tournament__manage-roster__actions__section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.tournament__manage-roster__input__copy-button {
-  margin-block-start: var(--s-2);
+.tournament__manage-roster__input {
+  width: min(100%, 20rem);
+}
+
+.tournament__manage-roster__select {
+  width: min(100%, 10rem);
+}
+
+.tournament__manage-roster__input__button {
+  margin-block-start: var(--s-4);
 }