odaptos_design_system 2.0.5 → 2.0.6

package/src/Molecules/Interviews/ChatInput.modules.scss

@@ -1,33 +1,33 @@
-.chat_input_container {
-  margin-top: auto;
-  display: flex;
-  padding: 0.625rem 0.75rem;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.5rem;
-  align-self: stretch;
-  border-radius: 0.5rem;
-  background: var(--color-neutral-clear-shades-150, #eee);
-  input {
-    width: 100%;
-    background: var(--color-neutral-clear-shades-150, #eee);
-    border: none;
-    color: var(--color-neutral-dark-shades-950, #26292e);
-    font-family: OpenSans;
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 1.5rem;
-  }
-  input:focus {
-    outline: none;
-  }
-  input::placeholder {
-    color: var(--color-neutral-dark-shades-550, #8a8b8e);
-    opacity: 1;
-  }
-
-  svg {
-    cursor: pointer;
-  }
-}
+.chat_input_container {
+  margin-top: auto;
+  display: flex;
+  padding: 0.625rem 0.75rem;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: 0.5rem;
+  background: var(--color-neutral-clear-shades-150, #eee);
+  input {
+    width: 100%;
+    background: var(--color-neutral-clear-shades-150, #eee);
+    border: none;
+    color: var(--color-neutral-dark-shades-950, #26292e);
+    font-family: OpenSans;
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5rem;
+  }
+  input:focus {
+    outline: none;
+  }
+  input::placeholder {
+    color: var(--color-neutral-dark-shades-550, #8a8b8e);
+    opacity: 1;
+  }
+
+  svg {
+    cursor: pointer;
+  }
+}

package/src/Molecules/Interviews/ChatInput.tsx

@@ -1,42 +1,42 @@
-import React from 'react';
-import { SendEmailIcon } from '../../';
-import styles from './ChatInput.modules.scss';
-interface ChatInputProps {
-  className?: string;
-  value: string;
-  placeholder: string;
-  sendMessage?: () => void;
-  onChange: (event: any) => void;
-}
-
-export const ChatInput = ({
-  className,
-  value,
-  onChange,
-  sendMessage,
-  placeholder,
-}: ChatInputProps) => {
-  return (
-    <div className={`${styles.chat_input_container} ${className ?? ''}`}>
-      <input
-        placeholder={placeholder}
-        value={value ? value : ''}
-        onChange={onChange}
-        onKeyPress={(e) => {
-          if (e.key === 'Enter' && sendMessage) {
-            sendMessage();
-            onChange({ target: { value: '' } });
-          }
-        }}
-      />
-      <SendEmailIcon
-        fill="#8A8B8E"
-        stroke="#8A8B8E"
-        onClick={() => {
-          if (sendMessage) sendMessage();
-          onChange({ target: { value: '' } });
-        }}
-      />
-    </div>
-  );
-};
+import React from 'react';
+import { SendEmailIcon } from '../../';
+import styles from './ChatInput.modules.scss';
+interface ChatInputProps {
+  className?: string;
+  value: string;
+  placeholder: string;
+  sendMessage?: () => void;
+  onChange: (event: any) => void;
+}
+
+export const ChatInput = ({
+  className,
+  value,
+  onChange,
+  sendMessage,
+  placeholder,
+}: ChatInputProps) => {
+  return (
+    <div className={`${styles.chat_input_container} ${className ?? ''}`}>
+      <input
+        placeholder={placeholder}
+        value={value ? value : ''}
+        onChange={onChange}
+        onKeyPress={(e) => {
+          if (e.key === 'Enter' && sendMessage) {
+            sendMessage();
+            onChange({ target: { value: '' } });
+          }
+        }}
+      />
+      <SendEmailIcon
+        fill="#8A8B8E"
+        stroke="#8A8B8E"
+        onClick={() => {
+          if (sendMessage) sendMessage();
+          onChange({ target: { value: '' } });
+        }}
+      />
+    </div>
+  );
+};

package/src/Molecules/Interviews/CircleIconButton.modules.scss

@@ -1,51 +1,51 @@
-.circle_icon_button {
-  display: inline-flex;
-  padding: 0.5rem;
-  align-items: flex-start;
-  gap: 0.5rem;
-  border-radius: 1.5rem;
-  background: var(--color-neutral-dark-shades-700, #64666a);
-  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.08),
-    0px 1px 3px 0px rgba(0, 0, 0, 0.15);
-  border: none;
-  position: relative;
-  cursor: pointer;
-  svg {
-    width: 1.5rem;
-    height: 1.5rem;
-    stroke: #ffffff;
-    fill: #ffffff;
-  }
-
-  &:hover {
-    background: var(--color-neutral-dark-shades-550, #8a8b8e);
-  }
-  &:active {
-    background: var(--color-neutral-dark-shades-700, #64666a);
-  }
-}
-
-.active {
-  background: var(--color-primary-300, #66adff);
-
-  &:hover {
-    background: #3392ff;
-  }
-  &:active {
-    background: #0077ff;
-  }
-  svg {
-    width: 1.5rem;
-    height: 1.5rem;
-    stroke: #00040a;
-    fill: #00040a;
-  }
-}
-
-.notif_icon {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 0.75rem !important;
-  height: 0.75rem !important;
-}
+.circle_icon_button {
+  display: inline-flex;
+  padding: 0.5rem;
+  align-items: flex-start;
+  gap: 0.5rem;
+  border-radius: 1.5rem;
+  background: var(--color-neutral-dark-shades-700, #64666a);
+  box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.08),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+  border: none;
+  position: relative;
+  cursor: pointer;
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    stroke: #ffffff;
+    fill: #ffffff;
+  }
+
+  &:hover {
+    background: var(--color-neutral-dark-shades-550, #8a8b8e);
+  }
+  &:active {
+    background: var(--color-neutral-dark-shades-700, #64666a);
+  }
+}
+
+.active {
+  background: var(--color-primary-300, #66adff);
+
+  &:hover {
+    background: #3392ff;
+  }
+  &:active {
+    background: #0077ff;
+  }
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    stroke: #00040a;
+    fill: #00040a;
+  }
+}
+
+.notif_icon {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 0.75rem !important;
+  height: 0.75rem !important;
+}

package/src/Molecules/Interviews/CircledIconButton.tsx

@@ -1,37 +1,37 @@
-import React, { HTMLAttributes } from 'react';
-import styles from './CircleIconButton.modules.scss';
-import { colors, MeetingIcon, NotifAlertIcon } from '../../';
-
-export interface CircledIconButtonProps
-  extends HTMLAttributes<HTMLButtonElement> {
-  icon: JSX.Element;
-  className?: string;
-  isActive?: boolean;
-  isNotif?: boolean;
-}
-
-export const CircledIconButton = ({
-  icon,
-  className,
-  isActive = false,
-  isNotif = false,
-  ...props
-}: CircledIconButtonProps) => {
-  return (
-    <button
-      className={`${styles.circle_icon_button} ${className ?? ''} ${
-        isActive ? styles.active : ''
-      }`}
-      {...props}
-    >
-      {icon ?? <MeetingIcon />}
-      {isNotif && (
-        <NotifAlertIcon
-          className={styles.notif_icon}
-          stroke={colors.black}
-          fill={colors.red_500}
-        />
-      )}
-    </button>
-  );
-};
+import React, { HTMLAttributes } from 'react';
+import styles from './CircleIconButton.modules.scss';
+import { colors, MeetingIcon, NotifAlertIcon } from '../../';
+
+export interface CircledIconButtonProps
+  extends HTMLAttributes<HTMLButtonElement> {
+  icon: JSX.Element;
+  className?: string;
+  isActive?: boolean;
+  isNotif?: boolean;
+}
+
+export const CircledIconButton = ({
+  icon,
+  className,
+  isActive = false,
+  isNotif = false,
+  ...props
+}: CircledIconButtonProps) => {
+  return (
+    <button
+      className={`${styles.circle_icon_button} ${className ?? ''} ${
+        isActive ? styles.active : ''
+      }`}
+      {...props}
+    >
+      {icon ?? <MeetingIcon />}
+      {isNotif && (
+        <NotifAlertIcon
+          className={styles.notif_icon}
+          stroke={colors.black}
+          fill={colors.red_500}
+        />
+      )}
+    </button>
+  );
+};

package/src/Molecules/Interviews/ControlsBar.modules.scss

@@ -1,62 +1,62 @@
-.control_bar {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-
-  .separator {
-    width: 0.0625rem;
-    height: 1rem;
-    background: var(--color-neutral-dark-shades-700, #64666a);
-  }
-
-  .record_btn {
-    display: flex;
-    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
-    align-items: center;
-    gap: 0.5rem;
-    border-radius: 1.5rem;
-    background: var(--Color-Extended-Red-50, #fff6f6);
-    box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.08),
-      0px 1px 3px 0px rgba(0, 0, 0, 0.15);
-    border: none;
-    cursor: pointer;
-
-    &:hover {
-      background: var(--Color-Neutral-Basics-White, #fff);
-    }
-    &:active {
-      background: var(--Color-Extended-Red-100, #fddbdb);
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      &:hover {
-        background: var(--Color-Extended-Red-50, #fff6f6);
-      }
-      &:active {
-        background: var(--Color-Extended-Red-50, #fff6f6);
-      }
-    }
-  }
-}
-
-.chatBubbleIcon {
-  svg {
-    fill: transparent !important;
-  }
-}
-
-//Popover styles
-.stop_rec_popover {
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  width: min-content;
-
-  &_actions {
-    display: flex;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-    width: max-content;
-  }
-}
+.control_bar {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  .separator {
+    width: 0.0625rem;
+    height: 1rem;
+    background: var(--color-neutral-dark-shades-700, #64666a);
+  }
+
+  .record_btn {
+    display: flex;
+    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
+    align-items: center;
+    gap: 0.5rem;
+    border-radius: 1.5rem;
+    background: var(--Color-Extended-Red-50, #fff6f6);
+    box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.08),
+      0px 1px 3px 0px rgba(0, 0, 0, 0.15);
+    border: none;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--Color-Neutral-Basics-White, #fff);
+    }
+    &:active {
+      background: var(--Color-Extended-Red-100, #fddbdb);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      &:hover {
+        background: var(--Color-Extended-Red-50, #fff6f6);
+      }
+      &:active {
+        background: var(--Color-Extended-Red-50, #fff6f6);
+      }
+    }
+  }
+}
+
+.chatBubbleIcon {
+  svg {
+    fill: transparent !important;
+  }
+}
+
+//Popover styles
+.stop_rec_popover {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  width: min-content;
+
+  &_actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+    width: max-content;
+  }
+}