@striae-org/striae 5.3.2 → 5.4.1

package/app/components/user/delete-account.module.css

@@ -1,277 +0,0 @@
-/* Modal Overlay */
-.modalOverlay {
-  position: fixed;
-  inset: 0;
-  background-color: color-mix(in lab, var(--background) 50%, transparent);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: var(--zIndex5);
-  cursor: default;
-  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
-}
-
-/* Modal Container */
-.modal {
-  background: var(--backgroundLight);
-  border-radius: var(--spaceXS);
-  width: 90%;
-  max-width: 600px;
-  box-shadow: 0 var(--spaceXS) var(--spaceL)
-    color-mix(in lab, var(--black) 10%, transparent);
-  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
-  overflow: hidden;
-  max-height: 90vh;
-  overflow-y: auto;
-  cursor: default;
-}
-
-/* Modal Header */
-.modalHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--spaceL);
-  border-bottom: 2px solid var(--error);
-  background-color: color-mix(in lab, var(--error) 5%, transparent);
-}
-
-.dangerTitle {
-  font-size: var(--fontSizeBodyL);
-  margin: 0;
-  font-weight: var(--fontWeightMedium);
-  color: var(--error);
-}
-
-.closeButton {
-  background: none;
-  border: none;
-  font-size: var(--fontSizeH5);
-  cursor: pointer;
-  padding: var(--spaceS);
-  color: var(--textLight);
-  transition: color var(--durationS) var(--bezierFastoutSlowin);
-}
-
-.closeButton:hover {
-  color: var(--error);
-}
-
-/* Modal Content */
-.modalContent {
-  padding: var(--spaceL);
-}
-
-/* Dividers */
-.divider {
-  height: 1px;
-  background-color: color-mix(in lab, var(--text) 15%, transparent);
-  margin: var(--spaceL) 0;
-}
-
-/* User Information Section */
-.userInfo {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spaceM);
-}
-
-.infoRow {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spaceXS);
-}
-
-.label {
-  font-weight: var(--fontWeightMedium);
-  color: var(--textTitle);
-  font-size: var(--fontSizeBodyS);
-}
-
-.value {
-  color: var(--textBody);
-  font-size: var(--fontSizeBodyS);
-  padding: var(--spaceS);
-  background-color: color-mix(in lab, var(--text) 5%, transparent);
-  border-radius: var(--spaceXS);
-  border: 1px solid color-mix(in lab, var(--text) 10%, transparent);
-  font-family: monospace;
-  word-break: break-all;
-}
-
-/* Warning Section */
-.warningSection {
-  text-align: center;
-}
-
-.warningText {
-  color: var(--error);
-  font-weight: var(--fontWeightMedium);
-  font-size: var(--fontSizeBodyM);
-  line-height: 1.5;
-  margin: 0;
-  padding: var(--spaceL);
-  background-color: color-mix(in lab, var(--error) 8%, transparent);
-  border: 1px solid color-mix(in lab, var(--error) 25%, transparent);
-  border-radius: var(--spaceXS);
-}
-
-.progressSection {
-  margin: var(--spaceL) 0;
-  padding: var(--spaceM);
-  border-radius: var(--spaceXS);
-  border: 1px solid color-mix(in lab, var(--error) 25%, transparent);
-  background-color: color-mix(in lab, var(--error) 8%, transparent);
-}
-
-.progressHeader {
-  display: flex;
-  justify-content: space-between;
-  gap: var(--spaceM);
-  margin-bottom: var(--spaceS);
-}
-
-.progressTitle {
-  margin: 0;
-  color: var(--error);
-  font-weight: var(--fontWeightMedium);
-  font-size: var(--fontSizeBodyS);
-}
-
-.progressMeta {
-  margin: 0;
-  color: var(--textBody);
-  font-size: var(--fontSizeBodyS);
-}
-
-.progressTrack {
-  width: 100%;
-  height: var(--spaceM);
-  border-radius: var(--spaceXL);
-  overflow: hidden;
-  background-color: color-mix(in lab, var(--error) 18%, transparent);
-  border: 1px solid color-mix(in lab, var(--error) 25%, transparent);
-}
-
-.progressFill {
-  height: 100%;
-  width: 0;
-  background-color: var(--error);
-  transition: width var(--durationS) var(--bezierFastoutSlowin);
-}
-
-.progressStatus {
-  margin: var(--spaceS) 0 0;
-  color: var(--error);
-  font-size: var(--fontSizeBodyS);
-  font-weight: var(--fontWeightMedium);
-  word-break: break-word;
-}
-
-/* Success and Error Messages */
-.errorMessage {
-  background-color: color-mix(in lab, var(--error) 10%, transparent);
-  color: var(--error);
-  border: 1px solid color-mix(in lab, var(--error) 25%, transparent);
-  padding: var(--spaceM);
-  border-radius: var(--spaceXS);
-  margin: var(--spaceL) 0;
-  text-align: center;
-}
-
-.errorMessage p {
-  margin: 0;
-  font-weight: var(--fontWeightMedium);
-}
-
-.successMessage {
-  background-color: color-mix(in lab, var(--accent) 10%, transparent);
-  color: var(--accent);
-  border: 1px solid color-mix(in lab, var(--accent) 25%, transparent);
-  padding: var(--spaceM);
-  border-radius: var(--spaceXS);
-  margin: var(--spaceL) 0;
-  text-align: center;
-}
-
-.successMessage p {
-  margin: 0;
-  font-weight: var(--fontWeightMedium);
-}
-
-.successMessage p:first-child {
-  margin-bottom: var(--spaceS);
-}
-
-/* Confirmation Form */
-.confirmationForm {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spaceL);
-}
-
-.formGroup {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spaceS);
-}
-
-.formLabel {
-  font-weight: var(--fontWeightMedium);
-  color: var(--textTitle);
-  font-size: var(--fontSizeBodyS);
-}
-
-.confirmationInput {
-  width: 100%;
-  padding: var(--spaceM);
-  border: 2px solid color-mix(in lab, var(--error) 30%, transparent);
-  border-radius: var(--spaceXS);
-  font-size: var(--fontSizeBodyS);
-  background: var(--backgroundLight);
-  color: var(--textBody);
-  transition: all var(--durationS) var(--bezierFastoutSlowin);
-  box-sizing: border-box;
-  font-family: monospace;
-}
-
-.confirmationInput:focus {
-  outline: none;
-  border-color: var(--error);
-  box-shadow: 0 0 0 2px color-mix(in lab, var(--error) 25%, transparent);
-}
-
-.confirmationInput::placeholder {
-  color: var(--textLight);
-  font-family: inherit;
-}
-
-/* Delete Button */
-.deleteButton {
-  background-color: var(--error);
-  color: var(--white);
-  border: none;
-  padding: var(--spaceL) var(--spaceXL);
-  border-radius: var(--spaceXS);
-  font-weight: var(--fontWeightMedium);
-  font-size: var(--fontSizeBodyM);
-  cursor: pointer;
-  transition: all var(--durationS) var(--bezierFastoutSlowin);
-  margin-top: var(--spaceL);
-  width: 100%;
-}
-
-.deleteButton:hover:not(:disabled) {
-  background-color: color-mix(in lab, var(--error) 85%, var(--black));
-}
-
-.deleteButton:focus:not(:disabled) {
-  outline: 2px solid var(--error);
-  outline-offset: 2px;
-}
-
-.deleteButton:disabled {
-  background-color: color-mix(in lab, var(--text) 20%, transparent);
-  color: var(--textLight);
-  cursor: not-allowed;
-}

package/app/components/user/inactivity-warning.module.css

@@ -1,148 +0,0 @@
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.8);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 9999;
-  backdrop-filter: blur(2px);
-  cursor: default;
-}
-
-.modal {
-  position: relative;
-  background: #ffffff;
-  border-radius: 12px;
-  padding: 2rem;
-  max-width: 400px;
-  width: 90%;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
-  border: 1px solid #e0e0e0;
-  animation: slideIn 0.3s ease-out;
-  cursor: default;
-}
-
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(-20px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.header {
-  text-align: center;
-  margin-bottom: 1.5rem;
-}
-
-.header h3 {
-  color: #1a1a1a;
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin: 0;
-}
-
-.content {
-  text-align: center;
-  margin-bottom: 2rem;
-}
-
-.content p {
-  color: #4a4a4a;
-  margin: 0 0 1rem 0;
-  line-height: 1.5;
-  font-size: 1rem;
-}
-
-.countdown {
-  font-size: 2rem;
-  font-weight: bold;
-  color: #dc3545;
-  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
-  background: rgba(220, 53, 69, 0.1);
-  padding: 1rem;
-  border-radius: 8px;
-  margin: 1rem 0;
-  border: 2px solid rgba(220, 53, 69, 0.2);
-}
-
-.actions {
-  display: flex;
-  gap: 1rem;
-  justify-content: center;
-}
-
-.extendButton,
-.signOutButton {
-  padding: 0.75rem 1.5rem;
-  border-radius: 6px;
-  border: none;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 0.9rem;
-}
-
-.extendButton {
-  background: #007bff;
-  color: white;
-}
-
-.extendButton:hover {
-  background: #0056b3;
-}
-
-.signOutButton {
-  background: transparent;
-  color: #6c757d;
-  border: 1px solid #dee2e6;
-}
-
-.signOutButton:hover {
-  background: #f8f9fa;
-  color: #495057;
-  border-color: #adb5bd;
-}
-
-.extendButton:focus,
-.signOutButton:focus {
-  outline: 2px solid #007bff;
-  outline-offset: 2px;
-}
-
-@media (prefers-color-scheme: dark) {
-  .overlay {
-    background-color: rgba(0, 0, 0, 0.9);
-  }
-
-  .modal {
-    background: #2d2d2d;
-    border-color: #404040;
-  }
-
-  .header h3 {
-    color: #ffffff;
-  }
-
-  .content p {
-    color: #cccccc;
-  }
-
-  .signOutButton {
-    color: #adb5bd;
-    border-color: #6c757d;
-  }
-
-  .signOutButton:hover {
-    background: #404040;
-    color: #ffffff;
-    border-color: #adb5bd;
-  }
-}

package/app/components/user/manage-profile.module.css

@@ -1,192 +0,0 @@
-/* Modal Overlay & Container */
-.modalOverlay {
-  position: fixed;
-  inset: 0;
-  background-color: color-mix(in lab, var(--background) 50%, transparent);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: var(--zIndex5);
-  cursor: default;
-  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
-}
-
-.modal {
-  background: var(--backgroundLight);
-  border-radius: var(--spaceXS);
-  width: 90%;
-  max-width: 500px;
-  max-height: min(90vh, 90vw);
-  box-shadow: 0 var(--spaceXS) var(--spaceL)
-    color-mix(in lab, var(--black) 10%, transparent);
-  display: flex;
-  flex-direction: column;
-  transition: background-color var(--durationM) var(--bezierFastoutSlowin);
-  overflow: hidden;
-  cursor: default;
-}
-
-/* Modal Header */
-.modalHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: var(--spaceL);
-  font-size: var(--fontSizeBodyL);
-  border-bottom: 1px solid color-mix(in lab, var(--text) 10%, transparent);
-  color: var(--textTitle);
-}
-
-.modalHeader h1 {
-  font-size: var(--fontSizeBodyM);
-  margin: 0;
-  font-weight: var(--fontWeightMedium);
-}
-
-/* Close Button */
-.closeButton {
-  background: none;
-  border: none;
-  font-size: var(--fontSizeH5);
-  cursor: pointer;
-  padding: var(--spaceS);
-  color: var(--textLight);
-  transition: color var(--durationS) var(--bezierFastoutSlowin);
-}
-
-.closeButton:hover {
-  color: var(--text);
-}
-
-/* Form & Form Groups */
-.form {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  gap: var(--spaceL);
-  width: 100%;
-  max-width: 100%;
-  padding: var(--spaceL);
-  margin: 0 auto;
-  box-sizing: border-box;
-  overflow-y: auto;
-}
-
-.formGroup {
-  margin-bottom: var(--spaceXS);
-}
-
-.formGroup label {
-  display: block;
-  margin-bottom: var(--spaceS);
-  color: var(--textBody);
-}
-
-/* Readonly Input Styling (for company/email fields) */
-.input {
-  width: 100%;
-  padding: var(--spaceM);
-  border: 1.5px solid color-mix(in lab, var(--text) 20%, transparent);
-  border-radius: var(--spaceXS);
-  font-size: var(--fontSizeBodyS);
-  background: var(--backgroundLight);
-  color: var(--textBody);
-  box-sizing: border-box;
-}
-
-.input:disabled {
-  background-color: color-mix(in lab, var(--background) 95%, transparent);
-  cursor: not-allowed;
-}
-
-/* Helper Text */
-.helpText {
-  font-size: var(--fontSizeBodyXS);
-  color: var(--textLight);
-  margin-top: var(--spaceXS);
-  line-height: 1.4;
-}
-
-/* Button Group */
-.buttonGroup {
-  display: flex;
-  gap: var(--spaceS);
-  margin-top: var(--spaceL);
-}
-
-.mfaVerificationSection {
-  margin-top: var(--spaceM);
-}
-
-.mfaReauthSection {
-  margin-top: var(--spaceM);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spaceS);
-}
-
-.mfaReauthSection label {
-  color: var(--textBody);
-}
-
-.mfaButtonGroup {
-  display: flex;
-  gap: var(--spaceS);
-  flex-wrap: wrap;
-  margin-top: var(--spaceS);
-}
-
-.resendTimer {
-  margin: 0;
-  font-size: var(--fontSizeBodyXS);
-  color: var(--textLight);
-  display: inline-flex;
-  align-items: center;
-}
-
-.recaptchaContainer {
-  height: 0;
-  overflow: hidden;
-}
-
-/* Delete Button (error variant) */
-.deleteButton {
-  background-color: var(--error);
-  color: var(--white);
-  border: none;
-  padding: var(--spaceM) var(--spaceL);
-  border-radius: var(--spaceXS);
-  font-weight: var(--fontWeightMedium);
-  cursor: pointer;
-  transition: all var(--durationS) var(--bezierFastoutSlowin);
-  margin-top: var(--spaceXL);
-  width: 100%;
-  font-size: var(--fontSizeBodyS);
-}
-
-.deleteButton:hover:not(:disabled) {
-  background-color: color-mix(in lab, var(--error) 85%, var(--black));
-}
-
-.deleteButton:focus {
-  outline: 2px solid var(--error);
-  outline-offset: 2px;
-}
-
-.deleteNotice {
-  margin-top: var(--spaceXL);
-  font-size: var(--fontSizeBodyXS);
-  text-align: center;
-  color: var(--textLight);
-}
-
-.deleteLink {
-  color: var(--error);
-  text-decoration: underline;
-  transition: color var(--durationS) var(--bezierFastoutSlowin);
-}
-
-.deleteLink:hover {
-  color: color-mix(in lab, var(--error) 85%, var(--black));
-}