ui and test fix

Author: KSemenenko

src/PrompterOne.Shared/Contracts/UiTestIds.Editor.cs

@@ -39,6 +39,7 @@ public static class Editor
         public const string FindBar = "editor-find-bar";
         public const string FindClose = "editor-find-close";
         public const string FindInput = "editor-find-input";
+        public const string FindInputShell = "editor-find-input-shell";
         public const string FindNext = "editor-find-next";
         public const string FindPrevious = "editor-find-previous";
         public const string FindResult = "editor-find-result";

src/PrompterOne.Shared/Editor/Components/EditorFindBar.razor

@@ -1,7 +1,7 @@
 @namespace PrompterOne.Shared.Components.Editor
 
 <div class="ed-find-bar" data-test="@UiTestIds.Editor.FindBar">
-    <label class="ed-find-input-shell">
+    <label class="ed-find-input-shell" data-test="@UiTestIds.Editor.FindInputShell">
         <UiIcon Kind="UiIconKind.Search" Size="14" />
         <input class="ed-find-input"
                type="text"

src/PrompterOne.Shared/Editor/Components/EditorFindBar.razor.css

@@ -0,0 +1,36 @@
+.ed-find-bar{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--gold-08);background:linear-gradient(180deg, rgba(13,18,28,.92), rgba(10,14,24,.94));}
+.ed-find-input-shell{display:flex;align-items:center;gap:8px;min-width:240px;flex:1 1 260px;padding:0 12px;min-height:38px;border:1px solid rgba(223,187,124,.14);border-radius:12px;background:rgba(255,255,255,.03);color:var(--text-3);}
+.ed-find-input{width:100%;border:none;outline:none;background:transparent;color:var(--text-1);font:inherit;}
+.ed-find-input::placeholder{color:var(--text-4);}
+.ed-find-result{min-width:72px;font-size:12px;font-weight:600;color:var(--text-3);text-align:center;}
+.ed-find-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}
+.ed-find-nav,.ed-find-close{font:inherit;cursor:pointer;min-height:36px;padding:0 12px;border:1px solid rgba(223,187,124,.14);border-radius:10px;background:rgba(255,255,255,.03);color:var(--text-2);}
+.ed-find-nav:hover,.ed-find-nav:focus-visible,.ed-find-close:hover,.ed-find-close:focus-visible{background:rgba(212,176,112,.08);color:var(--text-1);}
+.ed-find-nav:disabled{cursor:default;opacity:.42;}
+
+html[data-theme="light"] .ed-find-bar,
+html.theme-light .ed-find-bar,
+body.theme-light .ed-find-bar {
+    background: rgba(255, 255, 255, .94);
+    border-bottom-color: rgba(107, 90, 72, .08);
+}
+
+html[data-theme="light"] .ed-find-input-shell,
+html[data-theme="light"] .ed-find-nav,
+html[data-theme="light"] .ed-find-close,
+html.theme-light .ed-find-input-shell,
+html.theme-light .ed-find-nav,
+html.theme-light .ed-find-close,
+body.theme-light .ed-find-input-shell,
+body.theme-light .ed-find-nav,
+body.theme-light .ed-find-close {
+    border-color: rgba(139, 115, 85, .12);
+    background: rgba(107, 90, 72, .03);
+    color: #5C4D3D;
+}
+
+html[data-theme="light"] .ed-find-input,
+html.theme-light .ed-find-input,
+body.theme-light .ed-find-input {
+    color: #2C2418;
+}

src/PrompterOne.Shared/Editor/Components/EditorSourcePanel.razor.css

@@ -5,15 +5,6 @@
 .ed-find-toggle,.ed-find-nav,.ed-find-close{font:inherit;cursor:pointer;}
 .ed-find-toggle{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border:1px solid rgba(223,187,124,.14);border-radius:10px;background:rgba(255,255,255,.03);color:var(--text-2);}
 .ed-find-toggle:hover,.ed-find-toggle:focus-visible{background:rgba(212,176,112,.08);color:var(--text-1);}
-.ed-find-bar{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--gold-08);background:linear-gradient(180deg, rgba(13,18,28,.92), rgba(10,14,24,.94));}
-.ed-find-input-shell{display:flex;align-items:center;gap:8px;min-width:240px;flex:1 1 260px;padding:0 12px;min-height:38px;border:1px solid rgba(223,187,124,.14);border-radius:12px;background:rgba(255,255,255,.03);color:var(--text-3);}
-.ed-find-input{width:100%;border:none;outline:none;background:transparent;color:var(--text-1);font:inherit;}
-.ed-find-input::placeholder{color:var(--text-4);}
-.ed-find-result{min-width:72px;font-size:12px;font-weight:600;color:var(--text-3);text-align:center;}
-.ed-find-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}
-.ed-find-nav,.ed-find-close{min-height:36px;padding:0 12px;border:1px solid rgba(223,187,124,.14);border-radius:10px;background:rgba(255,255,255,.03);color:var(--text-2);}
-.ed-find-nav:hover,.ed-find-nav:focus-visible,.ed-find-close:hover,.ed-find-close:focus-visible{background:rgba(212,176,112,.08);color:var(--text-1);}
-.ed-find-nav:disabled{cursor:default;opacity:.42;}
 .tb-section{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;padding:2px 8px;position:relative;}
 .tb-label{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-3);margin-top:3px;white-space:nowrap;}
 .tb-row{display:flex;align-items:center;gap:2px;flex:1;}
@@ -184,36 +175,15 @@ body.theme-light .ed-toolbar {
     border-bottom-color: rgba(107, 90, 72, .1);
 }
 
-html[data-theme="light"] .ed-find-bar,
-html.theme-light .ed-find-bar,
-body.theme-light .ed-find-bar {
-    background: rgba(255, 255, 255, .94);
-    border-bottom-color: rgba(107, 90, 72, .08);
-}
-
 html[data-theme="light"] .ed-find-toggle,
-html[data-theme="light"] .ed-find-input-shell,
-html[data-theme="light"] .ed-find-nav,
-html[data-theme="light"] .ed-find-close,
 html.theme-light .ed-find-toggle,
-html.theme-light .ed-find-input-shell,
-html.theme-light .ed-find-nav,
-html.theme-light .ed-find-close,
 body.theme-light .ed-find-toggle,
-body.theme-light .ed-find-input-shell,
-body.theme-light .ed-find-nav,
-body.theme-light .ed-find-close {
+body.theme-light .ed-find-toggle {
     border-color: rgba(139, 115, 85, .12);
     background: rgba(107, 90, 72, .03);
     color: #5C4D3D;
 }
 
-html[data-theme="light"] .ed-find-input,
-html.theme-light .ed-find-input,
-body.theme-light .ed-find-input {
-    color: #2C2418;
-}
-
 html[data-theme="light"] .tb-label,
 html.theme-light .tb-label,
 body.theme-light .tb-label {

src/PrompterOne.Shared/Teleprompter/Pages/TeleprompterPage.razor

@@ -23,35 +23,37 @@
                                       CountdownCssClass="@BuildCountdownCssClass()" CountdownLabel="@BuildCountdownLabel()"
                                       OnBack="NavigateBackToEditorAsync" />
 
-            <TeleprompterReaderMirrorToggles FullscreenButtonCssClass="@BuildReaderFullscreenButtonCssClass()" FullscreenTitle="@ReaderFullscreenTitle"
-                                             IsFullscreenActive="@_isReaderFullscreenActive" IsMirrorHorizontal="@_isReaderMirrorHorizontal"
-                                             IsMirrorVertical="@_isReaderMirrorVertical" IsPortraitOrientation="@(_readerTextOrientation == ReaderTextOrientation.Portrait)"
-                                             MirrorHorizontalButtonCssClass="@BuildReaderMirrorButtonCssClass(_isReaderMirrorHorizontal)" MirrorHorizontalLabel="@ReaderMirrorHorizontalLabel"
-                                             MirrorHorizontalTitle="@ReaderMirrorHorizontalTitle" MirrorVerticalButtonCssClass="@BuildReaderMirrorButtonCssClass(_isReaderMirrorVertical)"
-                                             MirrorVerticalLabel="@ReaderMirrorVerticalLabel" MirrorVerticalTitle="@ReaderMirrorVerticalTitle"
-                                             OnToggleFullscreen="ToggleReaderFullscreenAsync" OnToggleMirrorHorizontal="ToggleReaderMirrorHorizontalAsync"
-                                             OnToggleMirrorVertical="ToggleReaderMirrorVerticalAsync" OnToggleOrientation="ToggleReaderOrientationAsync"
-                                             OrientationButtonCssClass="@BuildReaderOrientationButtonCssClass()" OrientationTitle="@ReaderOrientationTitle"
-                                             TooltipCssClassFactory="BuildRailTooltipCssClass" TooltipDomIdFactory="BuildRailTooltipDomId"
-                                             TooltipFocusIn="HandleRailTooltipFocusIn" TooltipFocusOut="HandleRailTooltipFocusOut"
-                                             TooltipKeyDown="HandleRailTooltipKeyDown" TooltipPointerDown="HandleRailTooltipPointerDown"
-                                             TooltipPointerEnter="HandleRailTooltipPointerEnter" TooltipPointerLeave="HandleRailTooltipPointerLeave"
-                                             TooltipTestIdFactory="BuildRailTooltipTestId" />
-            <TeleprompterReaderAlignmentControls AlignmentCenterButtonCssClass="@BuildReaderAlignmentButtonCssClass(ReaderTextAlignment.Center)"
-                                                 AlignmentJustifyButtonCssClass="@BuildReaderAlignmentButtonCssClass(ReaderTextAlignment.Justify)"
-                                                 AlignmentLeftButtonCssClass="@BuildReaderAlignmentButtonCssClass(ReaderTextAlignment.Left)"
-                                                 AlignmentRightButtonCssClass="@BuildReaderAlignmentButtonCssClass(ReaderTextAlignment.Right)"
-                                                 AlignCenterTitle="@ReaderTextAlignCenterTitle" AlignJustifyTitle="@ReaderTextAlignJustifyTitle"
-                                                 AlignLeftTitle="@ReaderTextAlignLeftTitle" AlignRightTitle="@ReaderTextAlignRightTitle"
-                                                 IsCenterAlignment="@(_readerTextAlignment == ReaderTextAlignment.Center)" IsJustifyAlignment="@(_readerTextAlignment == ReaderTextAlignment.Justify)"
-                                                 IsLeftAlignment="@(_readerTextAlignment == ReaderTextAlignment.Left)" IsRightAlignment="@(_readerTextAlignment == ReaderTextAlignment.Right)"
-                                                 OnSetCenterAlignment="@(() => SetReaderTextAlignmentAsync(ReaderTextAlignment.Center))" OnSetJustifyAlignment="@(() => SetReaderTextAlignmentAsync(ReaderTextAlignment.Justify))"
-                                                 OnSetLeftAlignment="@(() => SetReaderTextAlignmentAsync(ReaderTextAlignment.Left))" OnSetRightAlignment="@(() => SetReaderTextAlignmentAsync(ReaderTextAlignment.Right))"
+            <div class="rd-left-rail">
+                <TeleprompterReaderMirrorToggles FullscreenButtonCssClass="@BuildReaderFullscreenButtonCssClass()" FullscreenTitle="@ReaderFullscreenTitle"
+                                                 IsFullscreenActive="@_isReaderFullscreenActive" IsMirrorHorizontal="@_isReaderMirrorHorizontal"
+                                                 IsMirrorVertical="@_isReaderMirrorVertical" IsPortraitOrientation="@(_readerTextOrientation == ReaderTextOrientation.Portrait)"
+                                                 MirrorHorizontalButtonCssClass="@BuildReaderMirrorButtonCssClass(_isReaderMirrorHorizontal)" MirrorHorizontalLabel="@ReaderMirrorHorizontalLabel"
+                                                 MirrorHorizontalTitle="@ReaderMirrorHorizontalTitle" MirrorVerticalButtonCssClass="@BuildReaderMirrorButtonCssClass(_isReaderMirrorVertical)"
+                                                 MirrorVerticalLabel="@ReaderMirrorVerticalLabel" MirrorVerticalTitle="@ReaderMirrorVerticalTitle"
+                                                 OnToggleFullscreen="ToggleReaderFullscreenAsync" OnToggleMirrorHorizontal="ToggleReaderMirrorHorizontalAsync"
+                                                 OnToggleMirrorVertical="ToggleReaderMirrorVerticalAsync" OnToggleOrientation="ToggleReaderOrientationAsync"
+                                                 OrientationButtonCssClass="@BuildReaderOrientationButtonCssClass()" OrientationTitle="@ReaderOrientationTitle"
                                                  TooltipCssClassFactory="BuildRailTooltipCssClass" TooltipDomIdFactory="BuildRailTooltipDomId"
                                                  TooltipFocusIn="HandleRailTooltipFocusIn" TooltipFocusOut="HandleRailTooltipFocusOut"
                                                  TooltipKeyDown="HandleRailTooltipKeyDown" TooltipPointerDown="HandleRailTooltipPointerDown"
                                                  TooltipPointerEnter="HandleRailTooltipPointerEnter" TooltipPointerLeave="HandleRailTooltipPointerLeave"
                                                  TooltipTestIdFactory="BuildRailTooltipTestId" />
+                <TeleprompterReaderAlignmentControls AlignmentCenterButtonCssClass="@BuildReaderAlignmentButtonCssClass(ReaderTextAlignment.Center)"
+                                                     AlignmentJustifyButtonCssClass="@BuildReaderAlignmentButtonCssClass(ReaderTextAlignment.Justify)"
+                                                     AlignmentLeftButtonCssClass="@BuildReaderAlignmentButtonCssClass(ReaderTextAlignment.Left)"
+                                                     AlignmentRightButtonCssClass="@BuildReaderAlignmentButtonCssClass(ReaderTextAlignment.Right)"
+                                                     AlignCenterTitle="@ReaderTextAlignCenterTitle" AlignJustifyTitle="@ReaderTextAlignJustifyTitle"
+                                                     AlignLeftTitle="@ReaderTextAlignLeftTitle" AlignRightTitle="@ReaderTextAlignRightTitle"
+                                                     IsCenterAlignment="@(_readerTextAlignment == ReaderTextAlignment.Center)" IsJustifyAlignment="@(_readerTextAlignment == ReaderTextAlignment.Justify)"
+                                                     IsLeftAlignment="@(_readerTextAlignment == ReaderTextAlignment.Left)" IsRightAlignment="@(_readerTextAlignment == ReaderTextAlignment.Right)"
+                                                     OnSetCenterAlignment="@(() => SetReaderTextAlignmentAsync(ReaderTextAlignment.Center))" OnSetJustifyAlignment="@(() => SetReaderTextAlignmentAsync(ReaderTextAlignment.Justify))"
+                                                     OnSetLeftAlignment="@(() => SetReaderTextAlignmentAsync(ReaderTextAlignment.Left))" OnSetRightAlignment="@(() => SetReaderTextAlignmentAsync(ReaderTextAlignment.Right))"
+                                                     TooltipCssClassFactory="BuildRailTooltipCssClass" TooltipDomIdFactory="BuildRailTooltipDomId"
+                                                     TooltipFocusIn="HandleRailTooltipFocusIn" TooltipFocusOut="HandleRailTooltipFocusOut"
+                                                     TooltipKeyDown="HandleRailTooltipKeyDown" TooltipPointerDown="HandleRailTooltipPointerDown"
+                                                     TooltipPointerEnter="HandleRailTooltipPointerEnter" TooltipPointerLeave="HandleRailTooltipPointerLeave"
+                                                     TooltipTestIdFactory="BuildRailTooltipTestId" />
+            </div>
             <TeleprompterReaderSliders FontMax="@ReaderMaxFontSize" FontMin="@ReaderMinFontSize" FontTitle="@ReaderFontSliderTitle"
                                        FontValue="@_readerFontSize" FocalMax="@ReaderMaxFocalPointPercent" FocalMin="@ReaderMinFocalPointPercent"
                                        FocalTitle="@ReaderFocalSliderTitle" FocalValue="@_readerFocalPointPercent" OnFontInput="HandleReaderFontSizeInputAsync"