Add global select styles

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

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);

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);
 }