fix style of label

impresso · Nov 26, 2024 · a5964a6 · a5964a6
1 parent d134c9a
commit a5964a6
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/src/components/RegisterForm.tsx b/src/components/RegisterForm.tsx
@@ -226,7 +226,7 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
       <section className="mb-3 d-flex flex-wrap gap-2 align-items-center">
         {Plans.map((plan) => (
           <Form.Check
-            className="border rounded"
+            className={`border rounded-md shadow-sm ${formPayload.current.plan === plan ? "active" : ""}`}
             key={plan}
             type="radio"
             label={PlanLabels[plan]}

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -359,6 +359,28 @@ hr {
   border-end-start-radius: var(--impresso-border-radius-xs);
 }
 
+/* form check*/
+
+.form-check {
+  border-radius: var(--impresso-border-radius-sm);
+  cursor: pointer;
+  display: flex;
+  padding: 0;
+  align-items: center;
+}
+.form-check label {
+  padding: var(--spacer-1-2) var(--spacer-3) var(--spacer-2) var(--spacer-1);
+}
+.form-check.active {
+  border-color: var(--impresso-color-black) !important;
+}
+.form-check .form-check-input {
+  cursor: pointer;
+  display: block;
+  margin-top: 0;
+  margin-left: var(--spacer-2);
+  margin-right: var(--spacer-1);
+}
 /* Modal override settings */
 
 .modal-backdrop {