Merge branch 'master' into condense-color-variables

kira924age · Jul 25, 2023 · 2a270c7 · 2a270c7
2 parents f98ba25 + 78f91f9
commit 2a270c7
Show file tree

Hide file tree

Showing 17 changed files with 104 additions and 74 deletions.
diff --git a/admin/src/utils/feature_flags.ts b/admin/src/utils/feature_flags.ts
@@ -6,7 +6,7 @@ export function hasPaidFeature(): boolean {
   // If the user is not a turkey user then no need to check.
   if (configs.ITA_SERVER != "turkey") return true;
 
-  const authorizedTiers: PaidTiers[] = ["p1", "b1"];
+  const authorizedTiers: PaidTiers[] = ["p1", "b1","b0"];
   return authorizedTiers.includes(configs.TIER);
 }
 

diff --git a/src/bit-systems/mixer-animatable.ts b/src/bit-systems/mixer-animatable.ts
@@ -10,7 +10,7 @@ const mixerExitQuery = exitQuery(mixerQuery);
 
 export function mixerAnimatableSystem(world: HubsWorld): void {
   initializeEnterQuery(world).forEach(eid => {
-    if (entityExists(world, eid)) {
+    if (!entityExists(world, eid)) {
       console.warn("Skipping nonexistant entity."); // TODO Why does this happen?
       return;
     }

diff --git a/src/react-components/input/Button.scss b/src/react-components/input/Button.scss
@@ -23,32 +23,37 @@
   }
 }
 
+:local(.basic) {
+  border: 2px solid theme.$basic-border-color;
+  background-color: theme.$basic-color;
+}
+
+:local(.transparent) {
+  border-color: theme.$background1-color;
+  background-color: theme.$background1-color;
+}
+
 :local(.basic),
 :local(.transparent) {
-  color: theme.$text4-color;
+  color: theme.$text2-color;
   border: 2px solid theme.$basic-border-color;
   background-color: theme.$basic-color;
 
   svg {
-    color: theme.$text4-color;
+    color: theme.$text2-color;
   }
 
   &:hover {
-    color: theme.$text4-color-hover;
+    color: theme.$text2-color-hover;
     background-color: theme.$basic-color-hover;
   }
 
   &:active {
-    color: theme.$text4-color-pressed;
+    color: theme.$text2-color-pressed;
     background-color: theme.$basic-color-pressed;
   }
 }
 
-:local(.transparent) {
-  border-color: theme.$transparent;
-  background-color: theme.$transparent;
-}
-
 :local(.primary) {
   color: theme.$text5-color;
   background-color: theme.$primary-color;

diff --git a/src/react-components/input/InputField.scss b/src/react-components/input/InputField.scss
@@ -27,10 +27,11 @@
 
 :local(.info) {
   margin-top: 8px;
-  color: theme.$text3-color;
+  color: theme.$text2-color;
   align-self: flex-start;
 }
 
-:local(.info), :local(.error) {
+:local(.info),
+:local(.error) {
   font-size: 10px;
 }
diff --git a/src/react-components/input/RadioInput.scss b/src/react-components/input/RadioInput.scss
@@ -30,6 +30,7 @@
   align-self: center;
   position: relative;
   appearance: none;
+  cursor: pointer;
   -moz-appearance: none;
   -webkit-appearance: none;
 
@@ -77,10 +78,12 @@
 :local(.label) {
   font-size: theme.$font-size-sm;
   font-weight: theme.$font-weight-bold;
+  color: theme.$text1-color;
 }
 
 :local(.description) {
   margin-top: 4px;
   font-size: theme.$font-size-xs;
   font-weight: theme.$font-weight-regular;
-}
+  color: theme.$text2-color;
+}
diff --git a/src/react-components/input/TextInput.scss b/src/react-components/input/TextInput.scss
@@ -11,7 +11,7 @@ $input-height: 40px;
   color: theme.$text1-color;
   overflow: hidden;
 
-  &:focus-within  {
+  &:focus-within {
     border-color: theme.$input-outline-color;
     box-shadow: 0 0 0 2px theme.$input-outline-color;
   }
@@ -22,7 +22,8 @@ $input-height: 40px;
   height: 100%;
 }
 
-:local(.before-input), :local(.after-input) {
+:local(.before-input),
+:local(.after-input) {
   display: flex;
   height: $input-height;
   align-items: center;
@@ -35,11 +36,10 @@ $input-height: 40px;
     border-width: 0;
     min-height: auto;
     border: none;
-    
+
     &:hover {
-      border:none;
+      border: none;
     }
-
 
     :global(.keyboard-user) &:focus {
       border-width: 0;
@@ -50,21 +50,21 @@ $input-height: 40px;
         border-top-left-radius: theme.$border-radius-regular;
         border-bottom-left-radius: theme.$border-radius-regular;
       }
-  
+
       &:last-child {
         margin-left: 1px;
         box-shadow: inset 0 0 0 3px theme.$outline-color, 1px 0 0 2px theme.$outline-color;
         border-top-right-radius: theme.$border-radius-regular;
         border-bottom-right-radius: theme.$border-radius-regular;
       }
     }
-
   }
 
-  :local(.icon-button), & > svg  {
+  :local(.icon-button),
+  & > svg {
     padding: 0;
     margin-left: 8px;
-    
+
     &:last-child {
       margin-right: 8px;
     }
@@ -92,7 +92,7 @@ $input-height: 40px;
 :local(.invalid) {
   border-color: theme.$error-color !important;
 
-  &:focus-within  {
+  &:focus-within {
     box-shadow: 0 0 0 2px theme.$error-color;
   }
 }
@@ -108,6 +108,10 @@ $input-height: 40px;
   &:focus {
     box-shadow: none;
   }
+
+  &::placeholder {
+    color: theme.$text3-color;
+  }
 }
 
 :local(.invalid-icon) {

diff --git a/src/react-components/input/ToggleInput.scss b/src/react-components/input/ToggleInput.scss
@@ -28,7 +28,6 @@
   margin-left: 16px;
   display: flex;
   flex-direction: column;
-  color: theme.$text2-color;
 }
 
 :local(.label) {

diff --git a/src/react-components/input/ToolbarButton.scss b/src/react-components/input/ToolbarButton.scss
@@ -62,14 +62,14 @@
 :local(.transparent) {
   :local(.icon-container) {
     border-color: theme.$toolbar-basic-border-color;
-    background-color: theme.$transparent;
+    background-color: theme.$background1-color;
     svg {
       color: theme.$toolbar-basic-icon-color;
     }
 
     &:disabled,
     &[disabled] {
-      border-color: theme.$transparent;
+      border-color: theme.$background1-color;
       background-color: theme.$disabled-bg-color;
       svg {
         color: theme.$disabled-icon-color;

diff --git a/src/react-components/layout/LoadingScreenLayout.scss b/src/react-components/layout/LoadingScreenLayout.scss
@@ -12,10 +12,11 @@
   bottom: 0;
   top: 0;
   background: theme.$loading-screen-background;
+  color: theme.$text1-color;
 
   font-size: theme.$font-size-sm;
 
-  @media(min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
+  @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
     font-size: theme.$font-size-md;
   }
 }

diff --git a/src/react-components/layout/Page.scss b/src/react-components/layout/Page.scss
@@ -4,19 +4,24 @@
   box-sizing: border-box;
 }
 
-html, body, :global(#root), :global(#ui-root), :global(.home-root) {
+html,
+body,
+:global(#root),
+:global(#ui-root),
+:global(.home-root) {
   margin: 0;
-  height:100%;
+  height: 100%;
 }
 
 body {
   background: theme.$background1-color;
-  color: theme.$text1-color;
 }
 
-:global(#root), :global(#ui-root), :global(.home-root) {
-  display:flex; 
-  flex-direction:column;
+:global(#root),
+:global(#ui-root),
+:global(.home-root) {
+  display: flex;
+  flex-direction: column;
 }
 
 h1 {
@@ -32,7 +37,7 @@ main {
   order: -1;
   flex: 1;
 
-  @media(min-width: theme.$breakpoint-lg) {
+  @media (min-width: theme.$breakpoint-lg) {
     order: 0;
     display: flex;
     flex-direction: column;

diff --git a/src/react-components/room/ContentMenu.scss b/src/react-components/room/ContentMenu.scss
@@ -11,8 +11,9 @@
   border-radius: 12px;
   pointer-events: auto;
   padding: 4px;
+  color: theme.$text1-color;
 
-  @media(min-width: theme.$breakpoint-lg) {
+  @media (min-width: theme.$breakpoint-lg) {
     top: 24px;
     right: 24px;
   }
@@ -76,4 +77,4 @@
 :local(.disabled) {
   pointer-events: none;
   background-color: theme.$transparent;
-}
+}
diff --git a/src/react-components/room/MicSetupModal.js b/src/react-components/room/MicSetupModal.js
@@ -90,7 +90,11 @@ export function MicSetupModal({
                         checked={isMicrophoneMuted}
                         onChange={onChangeMicrophoneMuted}
                       />
-                      <ToolTip category="primary" description="Toggle mic on/off anytime after you enter the room (M)">
+                      <ToolTip
+                        location="right"
+                        category="primary"
+                        description="Toggle mic on/off anytime after you enter the room (M)"
+                      >
                         <InfoIcon className={styles.infoIcon} />
                       </ToolTip>
                     </>

diff --git a/src/react-components/room/RoomEntryModal.scss b/src/react-components/room/RoomEntryModal.scss
@@ -28,13 +28,14 @@
 
   h5 {
     font-size: theme.$font-size-xs;
-    color: theme.$grey;
+    color: theme.$text3-color;
     margin-bottom: 4px;
   }
 
   p {
     font-size: theme.$font-size-sm;
     text-align: center;
+    color: theme.$text1-color;
 
     @media (min-width: theme.$breakpoint-lg) and (min-height: theme.$breakpoint-vr) {
       font-size: 20px;

diff --git a/src/react-components/room/components/ChatToolbarButton/ChatToolbarButton.tsx b/src/react-components/room/components/ChatToolbarButton/ChatToolbarButton.tsx
@@ -14,9 +14,10 @@ const chatTooltipDescription = defineMessage({
 
 type ChatToolbarButtonProps = {
   onClick: () => void;
+  selected: boolean
 };
 
-const ChatToolbarButton = ({ onClick }: ChatToolbarButtonProps) => {
+const ChatToolbarButton = ({ onClick, selected }: ChatToolbarButtonProps) => {
   const { unreadMessages } = useContext(ChatContext);
   const intl = useIntl();
   const description = intl.formatMessage(chatTooltipDescription);
@@ -31,6 +32,7 @@ const ChatToolbarButton = ({ onClick }: ChatToolbarButtonProps) => {
         icon={<ChatIcon />}
         preset="accent4"
         label={<FormattedMessage id="chat-toolbar-button" defaultMessage="Chat" />}
+        selected={selected}
       />
     </ToolTip>
   );

diff --git a/src/react-components/styles/global.scss b/src/react-components/styles/global.scss
@@ -74,8 +74,6 @@
   --primary-color-pressed: #{theme.$blue-pressed};
 
   --secondary-color: #{theme.$lightgrey};
-  --secondary-color-hover: #{theme.$lightgrey-hover};
-  --secondary-color-pressed: #{theme.$lightgrey-pressed};
 
   --background1-color: #{theme.$white};
   --background2-color: #{theme.$recessed-bg};
@@ -133,8 +131,6 @@
   --favorite-color: #{theme.$yellow};
 
   --error-color: var(--cancel-color);
-  --error-color-hover: var(--cancel-color-hover);
-  --error-color-pressed: var(--cancel-color-pressed);
 
   --overlay-bg-color: rgba(0, 0, 0, 0.5);
   --overlay-text-color: #{theme.$white};
@@ -149,7 +145,7 @@
   --toolbar-basic-color-pressed: var(--secondary-color-pressed);
   --toolbar-basic-border-color: var(--basic-border-color);
 
-  --tile-text-color: var(--text4-color);
+  --tile-text-color: var(--text2-color);
   --tile-bg-color: var(--secondary-color);
   --tile-bg-color-hover: var(--secondary-color-hover);
   --tile-bg-color-pressed: var(--secondary-color-pressed);
@@ -169,6 +165,7 @@ body {
   height: 100%;
   overflow: auto;
   overscroll-behavior-y: none;
+  color: var(--text1-color);
 }
 
 body[data-theme="light"],