Correct list row striping logic across components and remove the deprecated HorizontalSelector

Author: robertpiosik

packages/ui/src/components/browser/SavedWebsites/SavedWebsites.module.scss

@@ -10,7 +10,7 @@
   gap: 8px;
   background-color: #dddddd;
 
-  &:nth-child(odd) {
+  &:nth-child(even) {
     background-color: #cbcbcb;
   }
 

packages/ui/src/components/editor/panel/ChatInput/ChatInput.module.scss

@@ -160,19 +160,37 @@
 
       &__button {
         font-size: var(--font-size-11px);
-        opacity: 0.5;
         pointer-events: all;
+        position: relative;
+        font-weight: 500;
+        color: transparent;
+
+        &::before {
+          content: attr(data-text);
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          font-weight: normal;
+          color: var(--vscode-foreground);
+          opacity: 0.5;
+        }
 
         &:hover {
-          opacity: 1;
+          &::before {
+            opacity: 1;
+          }
         }
 
         &--selected {
-          opacity: 1;
+          &::before {
+            font-weight: 500;
+            opacity: 1;
+          }
         }
       }
     }
-
     &__button {
       display: flex;
       align-items: center;

packages/ui/src/components/editor/panel/ChatInput/ChatInput.tsx

@@ -214,6 +214,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
                     )}
                     title={props.edit_format_instructions?.[format]}
                     onClick={() => props.on_edit_format_change?.(format)}
+                    data-text={format}
                   >
                     {format}
                   </button>

packages/ui/src/components/editor/panel/HorizontalSelector/HorizontalSelector.module.scss

@@ -23,7 +23,7 @@
   align-items: center;
   height: 36px;
 
-  &:nth-child(odd) {
+  &:nth-child(even) {
     background-color: var(--vscode-welcomePage-tileBackground);
   }
 

packages/ui/src/components/editor/panel/HorizontalSelector/HorizontalSelector.stories.tsx

@@ -23,7 +23,7 @@
   align-items: center;
   height: 36px;
 
-  &:nth-child(odd) {
+  &:nth-child(even) {
     background-color: var(--vscode-welcomePage-tileBackground);
   }