Go Live window UI remove dual output mode.

app/components-react/highlighter/Export/ExportModal.tsx

@@ -450,7 +450,7 @@ function ExportFlow({
                       { value: '1080', label: '1080p' },
                     ]}
                     onChange={setResolution}
-                    buttons={true}
+                    optionType="button"
                   />
                 </div>
 
@@ -464,7 +464,7 @@ function ExportFlow({
                       { value: '60', label: '60 FPS' },
                     ]}
                     onChange={setFps}
-                    buttons={true}
+                    optionType="button"
                   />
                 </div>
 
@@ -479,7 +479,7 @@ function ExportFlow({
                       { value: 'slow', label: $t('Smaller File') },
                     ]}
                     onChange={setPreset}
-                    buttons={true}
+                    optionType="button"
                   />
                 </div>
               </div>

app/components-react/shared/AddDestinationButton.m.less

@@ -28,7 +28,6 @@ button.add-destination-btn {
   position: relative;
   margin: auto;
   margin-bottom: 15px;
-  background-color: var(--background);
 
   &:hover {
     transition: 0.3s !important;
@@ -59,7 +58,7 @@ button.add-destination-btn {
 button.info-banner {
   width: unset !important;
   padding: 5px !important;
-  margin: 0px 15px 12px;
+  margin: 0px 15px;
   height: fit-content;
   align-items: flex-start;
   border-radius: 6px;
@@ -170,7 +169,7 @@ button.add-destination-header {
     width: 12px;
     height: 14px;
     float: inline-end;
-    margin-right: 50px;
+    margin-right: 10px;
     margin-top: 1px;
   }
 }
@@ -192,6 +191,7 @@ button.add-destination-header {
 .ultra-btn:extend(button.add-destination-btn) {
   margin: 0px 15px !important;
   width: calc(100% - 30px) !important;
+  background-color: var(--background);
   font-weight: 500;
 
   .ultra-icon {
@@ -201,29 +201,19 @@ button.add-destination-header {
 }
 
 .small-btn-group {
-  padding: 0px !important;
+  margin: 0px !important;
 }
 
-.small-btn:extend(button.add-destination-btn) {
-  height: 40px !important;
-  font-weight: 500;
+button.small-btn {
   color: var(--title) !important;
-  text-align: left !important;
-  font-size: 14px;
-  border: 0px !important;
-  background-color: var(--section-alt) !important;
-  margin: 0px 15px !important;
-  width: calc(100% - 30px) !important;
 
-  :global(.anticon.anticon-plus) {
-    font-size: 14px !important;
+  span.anticon.anticon-plus {
     color: var(--title) !important;
-    padding-left: 65px !important;
   }
 
   &:hover {
     transition: 0.3s;
-    background-color: var(--button);
+    background-color: var(--button) !important;
   }
 }
 

app/components-react/shared/AddDestinationButton.tsx

@@ -115,12 +115,12 @@ function SmallAddDestinationButton(p: { className?: string; onClick: () => void
   return (
     <Button
       data-name="default-add-destination"
-      className={cx(styles.addDestinationBtn, styles.smallBtn, p.className)}
+      className={cx(styles.smallBtn, p.className)}
       onClick={p.onClick}
       block
     >
-      <PlusIcon style={{ paddingLeft: '17px', fontSize: '24px' }} />
-      <span style={{ flex: 1 }}>{$t('Add Destination')}</span>
+      <PlusIcon style={{ color: 'var(--title)' }} />
+      <span>{$t('Add Destination')}</span>
     </Button>
   );
 }

app/components-react/shared/AnimatedWrapper.m.less

@@ -0,0 +1,12 @@
+.visible {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, height 0.3s ease-in-out;
+}
+
+.hidden {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, height 0.3s ease-in-out;
+  height: 0px !important;
+}

app/components-react/shared/AnimatedWrapper.tsx

@@ -0,0 +1,24 @@
+import React, { CSSProperties } from 'react';
+import styles from './AnimatedWrapper.m.less';
+import cx from 'classnames';
+
+interface IAnimatedWrapperProps {
+  className?: string;
+  visible: boolean;
+  style?: CSSProperties;
+  children?: React.ReactNode;
+  height: string;
+  onClick?: (props?: any) => void;
+}
+
+export default function AnimatedWrapper(p: IAnimatedWrapperProps) {
+  return (
+    <div
+      className={cx(p?.className, { [styles.visible]: p.visible, [styles.hidden]: !p.visible })}
+      style={{ ...p?.style, height: p.height }}
+      onClick={p?.onClick}
+    >
+      {p.children}
+    </div>
+  );
+}

app/components-react/shared/DisplaySelector.tsx

@@ -15,6 +15,8 @@ interface IDisplaySelectorProps {
   className?: string;
   style?: CSSProperties;
   nolabel?: boolean;
+  alignIcons?: 'left' | 'center' | 'right';
+  visible?: boolean;
 }
 
 export default function DisplaySelector(p: IDisplaySelectorProps) {
@@ -107,12 +109,14 @@ export default function DisplaySelector(p: IDisplaySelectorProps) {
       value={value}
       defaultValue="horizontal"
       options={displays}
+      alignIcons={p?.alignIcons}
       onChange={onChange}
       icons={true}
       className={p?.className}
       style={p?.style}
       direction="horizontal"
       gapsize={0}
+      optionType="button"
     />
   );
 }

app/components-react/shared/InfoBadge.m.less

@@ -7,8 +7,19 @@
   background-color: var(--info-badge);
   color: var(--info-badge-text);
   font-size: 10px;
+  display: inline-flex;
+  align-items: center;
 
   &.margin {
     margin: 15px;
   }
+
+  &.sm {
+    font-size: 14px;
+    padding: 2px 6px;
+
+    i {
+      margin-right: 5px;
+    }
+  }
 }

app/components-react/shared/InfoBadge.tsx

@@ -1,22 +1,31 @@
 import React, { CSSProperties } from 'react';
 import styles from './InfoBadge.m.less';
-import { $t } from 'services/i18n';
 import cx from 'classnames';
 
 interface IInfoBadge {
   content: string | React.ReactElement;
   className?: string;
   style?: CSSProperties;
   hasMargin?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  color?: string;
+  bgColor?: string;
 }
 
 export default function InfoBadge(p: IInfoBadge) {
   return (
     <div
-      className={cx(styles.infoBadge, p.hasMargin && styles.margin, p.className)}
-      style={p.style}
+      className={cx(p.className, styles.infoBadge, {
+        [styles.margin]: p.hasMargin,
+        [styles.sm]: p.size === 'sm',
+      })}
+      style={{
+        ...p.style,
+        color: `${p.color} !important`,
+        backgroundColor: `${p.bgColor} !important`,
+      }}
     >
-      {typeof p.content === 'string' ? $t(p.content) : p.content}
+      {p.content}
     </div>
   );
 }

app/components-react/shared/StreamShiftToggle.m.less

@@ -1,25 +1,29 @@
 .stream-shift-wrapper {
   display: inline-flex;
   align-items: center;
+  width: 100%;
 }
 
 .stream-shift-toggle {
   display: flex;
-  flex-direction: row;
+  color: var(--title) !important;
+}
+
+.label-ultra-badge {
+  display: flex;
   align-items: center;
-  font-size: 14px;
-  color: var(--title);
+}
 
-  :global(.ant-checkbox-wrapper) {
-    align-items: flex-start;
-  }
+.label-checkbox {
+  width: 100%;
+  text-wrap: nowrap;
 }
 
-.label-ultra-badge {
+.tooltip {
   display: flex;
   align-items: center;
 }
 
 .beta-badge {
-  margin: 1px 0 0 8px !important;
+  margin-left: 10px;
 }

app/components-react/shared/StreamShiftToggle.tsx

@@ -44,17 +44,16 @@ export default function StreamShiftToggle(p: IStreamShiftToggle) {
               <div
                 className={styles.labelUltraBadge}
                 onClick={() => {
-                  Services.MagicLinkService.actions.linkToPrime(
-                    'slobs-streamswitcher',
-                    { event: 'StreamShift' },
-                  );
+                  Services.MagicLinkService.actions.linkToPrime('slobs-streamswitcher', {
+                    event: 'StreamShift',
+                  });
                 }}
               >
                 <UltraIcon type="badge" style={{ marginRight: '5px' }} />
-                {label}
+                <div className={styles.labelCheckbox}>{label}</div>
               </div>
             ) : (
-              <>{label}</>
+              <div className={styles.labelCheckbox}>{label}</div>
             )
           }
           name="streamShift"
@@ -80,8 +79,9 @@ export default function StreamShiftToggle(p: IStreamShiftToggle) {
           placement="top"
           lightShadow={true}
           disabled={p?.disabled}
+          className={styles.tooltip}
         >
-          <i className="icon-information" style={{ marginLeft: '10px' }} />
+          <i className="icon-information" />
         </Tooltip>
       </div>
       <Badge className={styles.betaBadge} content={'Beta'} />