From 731c75ff840ebb794ebd95e1a6c403cf9204bcdc Mon Sep 17 00:00:00 2001
From: Eric Tian <tian.eric@hotmail.com>
Date: Sun, 31 Jan 2021 21:14:49 -0800
Subject: [PATCH 1/4] Redesign colour buttons

---
 .../TerminalSettingsEditor/ColorSchemes.cpp   | 32 +++++++--------
 .../TerminalSettingsEditor/ColorSchemes.xaml  | 29 ++++++--------
 .../Resources/en-US/Resources.resw            | 40 +++++++++----------
 3 files changed, 48 insertions(+), 53 deletions(-)

diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp b/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
index 37ab687d507..15969f38687 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
@@ -21,22 +21,22 @@ using namespace winrt::Windows::Foundation::Collections;
 namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 {
     static const std::array<hstring, 16> TableColorNames = {
-        RS_(L"ColorScheme_Black/Header"),
-        RS_(L"ColorScheme_Red/Header"),
-        RS_(L"ColorScheme_Green/Header"),
-        RS_(L"ColorScheme_Yellow/Header"),
-        RS_(L"ColorScheme_Blue/Header"),
-        RS_(L"ColorScheme_Purple/Header"),
-        RS_(L"ColorScheme_Cyan/Header"),
-        RS_(L"ColorScheme_White/Header"),
-        RS_(L"ColorScheme_BrightBlack/Header"),
-        RS_(L"ColorScheme_BrightRed/Header"),
-        RS_(L"ColorScheme_BrightGreen/Header"),
-        RS_(L"ColorScheme_BrightYellow/Header"),
-        RS_(L"ColorScheme_BrightBlue/Header"),
-        RS_(L"ColorScheme_BrightPurple/Header"),
-        RS_(L"ColorScheme_BrightCyan/Header"),
-        RS_(L"ColorScheme_BrightWhite/Header")
+        RS_(L"ColorScheme_Black/ToolTip"),
+        RS_(L"ColorScheme_Red/ToolTip"),
+        RS_(L"ColorScheme_Green/ToolTip"),
+        RS_(L"ColorScheme_Yellow/ToolTip"),
+        RS_(L"ColorScheme_Blue/ToolTip"),
+        RS_(L"ColorScheme_Purple/ToolTip"),
+        RS_(L"ColorScheme_Cyan/ToolTip"),
+        RS_(L"ColorScheme_White/ToolTip"),
+        RS_(L"ColorScheme_BrightBlack/ToolTip"),
+        RS_(L"ColorScheme_BrightRed/ToolTip"),
+        RS_(L"ColorScheme_BrightGreen/ToolTip"),
+        RS_(L"ColorScheme_BrightYellow/ToolTip"),
+        RS_(L"ColorScheme_BrightBlue/ToolTip"),
+        RS_(L"ColorScheme_BrightPurple/ToolTip"),
+        RS_(L"ColorScheme_BrightCyan/ToolTip"),
+        RS_(L"ColorScheme_BrightWhite/ToolTip")
     };
 
     static const std::array<std::wstring, 9> InBoxSchemes = {
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
index 0dddeb1069d..b15b19b2403 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
@@ -17,11 +17,11 @@ the MIT License. See LICENSE in the project root for license information. -->
                 <ResourceDictionary Source="CommonResources.xaml"/>
             </ResourceDictionary.MergedDictionaries>
 
-            <Thickness x:Key="ColorSchemesStandardControlMargin">0,0,10,20</Thickness>
+            <Thickness x:Key="ColorSchemesStandardControlMargin">0,0,10,10</Thickness>
 
             <Style x:Key="ColorStackPanelStyle" TargetType="StackPanel">
                 <Setter Property="Margin" Value="{StaticResource ColorSchemesStandardControlMargin}"/>
-                <Setter Property="Height" Value="59"/>
+                <Setter Property="Height" Value="30"/>
             </Style>
 
             <Style x:Key="ColorHeaderStyle" TargetType="TextBlock">
@@ -156,9 +156,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                 <ItemsControl.ItemTemplate>
                     <DataTemplate x:DataType="local:ColorTableEntry">
                         <StackPanel Style="{StaticResource ColorStackPanelStyle}">
-                            <TextBlock Text="{x:Bind Name, Mode=OneWay}"
-                                       Style="{StaticResource ColorHeaderStyle}"/>
-                            <Button Background="{x:Bind Color, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}">
+                            <Button Background="{x:Bind Color, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}"
+                                    ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}">
 
 
                                 <Button.Resources>
@@ -194,9 +193,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                           Grid.Column="1"
                           Style="{StaticResource ItemsControlStyle}">
                 <StackPanel Style="{StaticResource ColorStackPanelStyle}">
-                    <TextBlock x:Uid="ColorScheme_Foreground"
-                               Style="{StaticResource ColorHeaderStyle}"/>
-                    <Button Background="{Binding Color, ElementName=ForegroundPicker, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}">
+                    <Button x:Uid="ColorScheme_Foreground"
+                            Background="{Binding Color, ElementName=ForegroundPicker, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}">
 
 
                         <Button.Resources>
@@ -222,9 +220,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                     </Button>
                 </StackPanel>
                 <StackPanel Style="{StaticResource ColorStackPanelStyle}">
-                    <TextBlock x:Uid="ColorScheme_Background"
-                               Style="{StaticResource ColorHeaderStyle}"/>
-                    <Button Background="{Binding Color, ElementName=BackgroundPicker, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}">
+                    <Button x:Uid="ColorScheme_Background"
+                            Background="{Binding Color, ElementName=BackgroundPicker, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}">
 
 
                         <Button.Resources>
@@ -251,9 +248,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                     </Button>
                 </StackPanel>
                 <StackPanel Style="{StaticResource ColorStackPanelStyle}">
-                    <TextBlock x:Uid="ColorScheme_CursorColor"
-                               Style="{StaticResource ColorHeaderStyle}"/>
-                    <Button Background="{Binding Color, ElementName=CursorColorPicker, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}">
+                    <Button x:Uid="ColorScheme_CursorColor"
+                            Background="{Binding Color, ElementName=CursorColorPicker, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}">
 
 
                         <Button.Resources>
@@ -280,9 +276,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                     </Button>
                 </StackPanel>
                 <StackPanel Style="{StaticResource ColorStackPanelStyle}">
-                    <TextBlock x:Uid="ColorScheme_SelectionBackground"
-                               Style="{StaticResource ColorHeaderStyle}"/>
-                    <Button Background="{Binding Color, ElementName=SelectionBackgroundPicker, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}">
+                    <Button x:Uid="ColorScheme_SelectionBackground"
+                            Background="{Binding Color, ElementName=SelectionBackgroundPicker, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}">
 
 
                         <Button.Resources>
diff --git a/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw b/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
index a71e3cde1f2..f3ea8965b9b 100644
--- a/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
+++ b/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
@@ -117,64 +117,64 @@
   <resheader name="writer">
     <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
   </resheader>
-  <data name="ColorScheme_Background.Text" xml:space="preserve">
+  <data name="ColorScheme_Background.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
     <value>Background</value>
   </data>
-  <data name="ColorScheme_Black.Header" xml:space="preserve">
+  <data name="ColorScheme_Black.ToolTip" xml:space="preserve">
     <value>Black</value>
   </data>
-  <data name="ColorScheme_Blue.Header" xml:space="preserve">
+  <data name="ColorScheme_Blue.ToolTip" xml:space="preserve">
     <value>Blue</value>
   </data>
-  <data name="ColorScheme_BrightBlack.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightBlack.ToolTip" xml:space="preserve">
     <value>Bright black</value>
   </data>
-  <data name="ColorScheme_BrightBlue.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightBlue.ToolTip" xml:space="preserve">
     <value>Bright blue</value>
   </data>
-  <data name="ColorScheme_BrightCyan.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightCyan.ToolTip" xml:space="preserve">
     <value>Bright cyan</value>
   </data>
-  <data name="ColorScheme_BrightGreen.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightGreen.ToolTip" xml:space="preserve">
     <value>Bright green</value>
   </data>
-  <data name="ColorScheme_BrightPurple.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightPurple.ToolTip" xml:space="preserve">
     <value>Bright purple</value>
   </data>
-  <data name="ColorScheme_BrightRed.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightRed.ToolTip" xml:space="preserve">
     <value>Bright red</value>
   </data>
-  <data name="ColorScheme_BrightWhite.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightWhite.ToolTip" xml:space="preserve">
     <value>Bright white</value>
   </data>
-  <data name="ColorScheme_BrightYellow.Header" xml:space="preserve">
+  <data name="ColorScheme_BrightYellow.ToolTip" xml:space="preserve">
     <value>Bright yellow</value>
   </data>
-  <data name="ColorScheme_CursorColor.Text" xml:space="preserve">
+  <data name="ColorScheme_CursorColor.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
     <value>Cursor color</value>
   </data>
-  <data name="ColorScheme_Cyan.Header" xml:space="preserve">
+  <data name="ColorScheme_Cyan.ToolTip" xml:space="preserve">
     <value>Cyan</value>
   </data>
-  <data name="ColorScheme_Foreground.Text" xml:space="preserve">
+  <data name="ColorScheme_Foreground.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
     <value>Foreground</value>
   </data>
-  <data name="ColorScheme_Green.Header" xml:space="preserve">
+  <data name="ColorScheme_Green.ToolTip" xml:space="preserve">
     <value>Green</value>
   </data>
-  <data name="ColorScheme_Purple.Header" xml:space="preserve">
+  <data name="ColorScheme_Purple.ToolTip" xml:space="preserve">
     <value>Purple</value>
   </data>
-  <data name="ColorScheme_SelectionBackground.Text" xml:space="preserve">
+  <data name="ColorScheme_SelectionBackground.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
     <value>Selection background</value>
   </data>
-  <data name="ColorScheme_Red.Header" xml:space="preserve">
+  <data name="ColorScheme_Red.ToolTip" xml:space="preserve">
     <value>Red</value>
   </data>
-  <data name="ColorScheme_White.Header" xml:space="preserve">
+  <data name="ColorScheme_White.ToolTip" xml:space="preserve">
     <value>White</value>
   </data>
-  <data name="ColorScheme_Yellow.Header" xml:space="preserve">
+  <data name="ColorScheme_Yellow.ToolTip" xml:space="preserve">
     <value>Yellow</value>
   </data>
   <data name="Globals_AlwaysShowTabs.Header" xml:space="preserve">

From 63f86a994cab10b8a057b85d2ab1c6fa5775c130 Mon Sep 17 00:00:00 2001
From: Eric Tian <tian.eric@hotmail.com>
Date: Thu, 4 Feb 2021 18:23:44 -0800
Subject: [PATCH 2/4] Add non-bright colours row

Note: This is largely design, it is not complete yet!
---
 .../TerminalSettingsEditor/ColorSchemes.cpp   | 12 +++++---
 .../TerminalSettingsEditor/ColorSchemes.h     |  3 +-
 .../TerminalSettingsEditor/ColorSchemes.idl   |  3 +-
 .../TerminalSettingsEditor/ColorSchemes.xaml  | 28 +++++++++++++++++--
 4 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp b/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
index 15969f38687..fd29cea50ed 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
@@ -53,7 +53,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
     ColorSchemes::ColorSchemes() :
         _ColorSchemeList{ single_threaded_observable_vector<Model::ColorScheme>() },
-        _CurrentColorTable{ single_threaded_observable_vector<Editor::ColorTableEntry>() }
+        _CurrentNonBrightColorTable{ single_threaded_observable_vector<Editor::ColorTableEntry>() },
+        _CurrentBrightColorTable{ single_threaded_observable_vector<Editor::ColorTableEntry>() }
     {
         InitializeComponent();
     }
@@ -71,7 +72,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         for (uint8_t i = 0; i < TableColorNames.size(); ++i)
         {
             auto entry = winrt::make<ColorTableEntry>(i, Windows::UI::Color{ 0, 0, 0, 0 });
-            _CurrentColorTable.Append(entry);
+            _CurrentNonBrightColorTable.Append(entry);
+            _CurrentBrightColorTable.Append(entry);
         }
 
         // Try to look up the scheme that was navigated to. If we find it, immediately select it.
@@ -155,7 +157,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
             {
                 auto index = winrt::unbox_value<uint8_t>(tag);
                 CurrentColorScheme().SetColorTableEntry(index, args.NewColor());
-                _CurrentColorTable.GetAt(index).Color(args.NewColor());
+                _CurrentNonBrightColorTable.GetAt(index).Color(args.NewColor());
+                _CurrentBrightColorTable.GetAt(index).Color(args.NewColor());
             }
         }
     }
@@ -292,7 +295,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     {
         for (uint8_t i = 0; i < TableColorNames.size(); ++i)
         {
-            _CurrentColorTable.GetAt(i).Color(colorScheme.Table()[i]);
+            _CurrentNonBrightColorTable.GetAt(i).Color(colorScheme.Table()[i]);
+            _CurrentBrightColorTable.GetAt(i).Color(colorScheme.Table()[i]);
         }
     }
 
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.h b/src/cascadia/TerminalSettingsEditor/ColorSchemes.h
index 6f053e99591..ab47578e2ef 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.h
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.h
@@ -39,7 +39,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         void DeleteConfirmation_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
 
         GETSET_PROPERTY(Editor::ColorSchemesPageNavigationState, State, nullptr);
-        GETSET_PROPERTY(Windows::Foundation::Collections::IObservableVector<winrt::Microsoft::Terminal::Settings::Editor::ColorTableEntry>, CurrentColorTable, nullptr);
+        GETSET_PROPERTY(Windows::Foundation::Collections::IObservableVector<winrt::Microsoft::Terminal::Settings::Editor::ColorTableEntry>, CurrentNonBrightColorTable, nullptr);
+        GETSET_PROPERTY(Windows::Foundation::Collections::IObservableVector<winrt::Microsoft::Terminal::Settings::Editor::ColorTableEntry>, CurrentBrightColorTable, nullptr);
         GETSET_PROPERTY(Windows::Foundation::Collections::IObservableVector<Model::ColorScheme>, ColorSchemeList, nullptr);
 
         WINRT_CALLBACK(PropertyChanged, Windows::UI::Xaml::Data::PropertyChangedEventHandler);
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.idl b/src/cascadia/TerminalSettingsEditor/ColorSchemes.idl
index 21c80c2b466..e1f0d85b877 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.idl
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.idl
@@ -19,7 +19,8 @@ namespace Microsoft.Terminal.Settings.Editor
         Boolean IsRenaming { get; };
 
         Microsoft.Terminal.Settings.Model.ColorScheme CurrentColorScheme { get; };
-        Windows.Foundation.Collections.IObservableVector<ColorTableEntry> CurrentColorTable;
+        Windows.Foundation.Collections.IObservableVector<ColorTableEntry> CurrentNonBrightColorTable;
+        Windows.Foundation.Collections.IObservableVector<ColorTableEntry> CurrentBrightColorTable;
         Windows.Foundation.Collections.IObservableVector<Microsoft.Terminal.Settings.Model.ColorScheme> ColorSchemeList { get; };
     }
 
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
index b15b19b2403..8ba29de01c1 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
@@ -58,7 +58,8 @@ the MIT License. See LICENSE in the project root for license information. -->
                 <RowDefinition Height="Auto"/>
             </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="1*" MaxWidth="480"/>
+                <ColumnDefinition Width="1*" MaxWidth="240"/>
+                <ColumnDefinition Width="1*" MinWidth="240"/>
                 <ColumnDefinition Width="1*"/>
             </Grid.ColumnDefinitions>
 
@@ -142,7 +143,7 @@ the MIT License. See LICENSE in the project root for license information. -->
 
             <!-- Color Table (Left Column)-->
             <ItemsControl x:Name="ColorTableControl"
-                          ItemsSource="{x:Bind CurrentColorTable, Mode=OneWay}"
+                          ItemsSource="{x:Bind CurrentNonBrightColorTable, Mode=OneWay}"
                           Grid.Row="1"
                           Grid.Column="0"
                           Style="{StaticResource ItemsControlStyle}">
@@ -188,9 +189,30 @@ the MIT License. See LICENSE in the project root for license information. -->
                 </ItemsControl.ItemTemplate>
             </ItemsControl>
 
-            <!-- Additional Colors (Right Column) -->
             <ItemsControl Grid.Row="1"
                           Grid.Column="1"
+                          Style="{StaticResource ItemsControlStyle}"
+                          ItemsSource="{x:Bind CurrentBrightColorTable}">
+
+                <ItemsControl.ItemsPanel>
+                    <ItemsPanelTemplate>
+                        <ItemsWrapGrid Orientation="Horizontal"
+                                       MaximumRowsOrColumns="4"/>
+                    </ItemsPanelTemplate>
+                </ItemsControl.ItemsPanel>
+                <ItemsControl.ItemTemplate>
+                    <DataTemplate x:DataType="local:ColorTableEntry">
+                        <StackPanel Style="{StaticResource ColorStackPanelStyle}">
+                            <Button Background="{x:Bind Color, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}"
+                                    ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}"/>
+                        </StackPanel>
+                    </DataTemplate>
+                </ItemsControl.ItemTemplate>
+            </ItemsControl>
+            
+            <!-- Additional Colors (Right Column) -->
+            <ItemsControl Grid.Row="1"
+                          Grid.Column="2"
                           Style="{StaticResource ItemsControlStyle}">
                 <StackPanel Style="{StaticResource ColorStackPanelStyle}">
                     <Button x:Uid="ColorScheme_Foreground"

From 56d3f42e2e69ea82fd76a43557a4571543fdd938 Mon Sep 17 00:00:00 2001
From: Eric Tian <tian.eric@hotmail.com>
Date: Sat, 13 Feb 2021 21:18:15 -0800
Subject: [PATCH 3/4] Split colour table into two

---
 .../TerminalSettingsEditor/ColorSchemes.cpp   |  56 +++++++--
 .../TerminalSettingsEditor/ColorSchemes.h     |   3 +-
 .../TerminalSettingsEditor/ColorSchemes.xaml  | 118 +++++++++++++++---
 .../Resources/en-US/Resources.resw            |  42 +++++++
 4 files changed, 195 insertions(+), 24 deletions(-)

diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp b/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
index fd29cea50ed..bfbc9acb2f9 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
@@ -20,6 +20,8 @@ using namespace winrt::Windows::Foundation::Collections;
 
 namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 {
+    static constexpr int ColorTableDivider = 8;
+
     static const std::array<hstring, 16> TableColorNames = {
         RS_(L"ColorScheme_Black/ToolTip"),
         RS_(L"ColorScheme_Red/ToolTip"),
@@ -72,8 +74,15 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         for (uint8_t i = 0; i < TableColorNames.size(); ++i)
         {
             auto entry = winrt::make<ColorTableEntry>(i, Windows::UI::Color{ 0, 0, 0, 0 });
-            _CurrentNonBrightColorTable.Append(entry);
-            _CurrentBrightColorTable.Append(entry);
+
+            if (i < ColorTableDivider)
+            {
+                _CurrentNonBrightColorTable.Append(entry);
+            }
+            else
+            {
+                _CurrentBrightColorTable.Append(entry);
+            }
         }
 
         // Try to look up the scheme that was navigated to. If we find it, immediately select it.
@@ -139,16 +148,16 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     }
 
     // Function Description:
-    // - Called when a ColorPicker control has selected a new color. This is specifically
+    // - Called when a ColorPicker control of the non-bright colour table has selected a new color. This is specifically
     //   called by color pickers assigned to a color table entry. It takes the index
     //   that's been stuffed in the Tag property of the color picker and uses it
-    //   to update the color table accordingly.
+    //   to update the non-bright color table accordingly.
     // Arguments:
-    // - sender: the color picker that raised this event.
+    // - sender: the color picker of the non-bright colour table that raised this event.
     // - args: the args that contains the new color that was picked.
     // Return Value:
     // - <none>
-    void ColorSchemes::ColorPickerChanged(IInspectable const& sender,
+    void ColorSchemes::NonBrightColorPickerChanged(IInspectable const& sender,
                                           ColorChangedEventArgs const& args)
     {
         if (auto picker = sender.try_as<ColorPicker>())
@@ -158,7 +167,30 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
                 auto index = winrt::unbox_value<uint8_t>(tag);
                 CurrentColorScheme().SetColorTableEntry(index, args.NewColor());
                 _CurrentNonBrightColorTable.GetAt(index).Color(args.NewColor());
-                _CurrentBrightColorTable.GetAt(index).Color(args.NewColor());
+            }
+        }
+    }
+
+    // Function Description:
+    // - Called when a ColorPicker control of the bright colour table has selected a new color. This is specifically
+    //   called by color pickers assigned to a color table entry. It takes the index
+    //   that's been stuffed in the Tag property of the color picker and uses it
+    //   to update the bright color table accordingly.
+    // Arguments:
+    // - sender: the color picker of the bright colour table that raised this event.
+    // - args: the args that contains the new color that was picked.
+    // Return Value:
+    // - <none>
+    void ColorSchemes::BrightColorPickerChanged(IInspectable const& sender,
+                                                   ColorChangedEventArgs const& args)
+    {
+        if (auto picker = sender.try_as<ColorPicker>())
+        {
+            if (auto tag = picker.Tag())
+            {
+                auto index = winrt::unbox_value<uint8_t>(tag);
+                CurrentColorScheme().SetColorTableEntry(index, args.NewColor());
+                _CurrentBrightColorTable.GetAt(index - ColorTableDivider).Color(args.NewColor());
             }
         }
     }
@@ -295,8 +327,14 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     {
         for (uint8_t i = 0; i < TableColorNames.size(); ++i)
         {
-            _CurrentNonBrightColorTable.GetAt(i).Color(colorScheme.Table()[i]);
-            _CurrentBrightColorTable.GetAt(i).Color(colorScheme.Table()[i]);
+            if (i < ColorTableDivider)
+            {
+                _CurrentNonBrightColorTable.GetAt(i).Color(colorScheme.Table()[i]);
+            }
+            else
+            {
+                _CurrentBrightColorTable.GetAt(i).Color(colorScheme.Table()[i]);
+            }
         }
     }
 
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.h b/src/cascadia/TerminalSettingsEditor/ColorSchemes.h
index ab47578e2ef..1f54f5218cd 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.h
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.h
@@ -27,7 +27,8 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
         void OnNavigatedTo(const winrt::Windows::UI::Xaml::Navigation::NavigationEventArgs& e);
 
         void ColorSchemeSelectionChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::Controls::SelectionChangedEventArgs const& args);
-        void ColorPickerChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::Controls::ColorChangedEventArgs const& args);
+        void NonBrightColorPickerChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::Controls::ColorChangedEventArgs const& args);
+        void BrightColorPickerChanged(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::Controls::ColorChangedEventArgs const& args);
         void AddNew_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
 
         void Rename_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Windows::UI::Xaml::RoutedEventArgs const& e);
diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
index 8ba29de01c1..2d70b2dda72 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.xaml
@@ -53,13 +53,16 @@ the MIT License. See LICENSE in the project root for license information. -->
     <ScrollViewer>
         <Grid Margin="{StaticResource StandardIndentMargin}">
             <Grid.RowDefinitions>
+                <RowDefinition Height="Auto"/>
                 <RowDefinition Height="Auto"/>
                 <RowDefinition Height="*"/>
                 <RowDefinition Height="Auto"/>
             </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="1*" MaxWidth="240"/>
-                <ColumnDefinition Width="1*" MinWidth="240"/>
+                <ColumnDefinition Width="1*" MaxWidth="120"/>
+                <ColumnDefinition Width="1*" MaxWidth="120"/>
+                <ColumnDefinition Width="1*" MaxWidth="120"/>
+                <ColumnDefinition Width="1*" MaxWidth="120"/>
                 <ColumnDefinition Width="1*"/>
             </Grid.ColumnDefinitions>
 
@@ -67,7 +70,7 @@ the MIT License. See LICENSE in the project root for license information. -->
             <StackPanel Orientation="Horizontal"
                         Grid.Row="0"
                         Grid.Column="0"
-                        Grid.ColumnSpan="2">
+                        Grid.ColumnSpan="4">
 
                 <StackPanel Orientation="Horizontal"
                             Visibility="{x:Bind IsRenaming, Converter={StaticResource InvertedBooleanToVisibilityConverter}, Mode=OneWay}">
@@ -141,11 +144,56 @@ the MIT License. See LICENSE in the project root for license information. -->
                 </Button>
             </StackPanel>
 
-            <!-- Color Table (Left Column)-->
+            <StackPanel Grid.Row="1"
+                        Grid.Column="0"
+                        Grid.ColumnSpan="3"
+                        Margin="0,24,0,0">
+                <TextBlock x:Uid="ColorSchemeLabel"/>
+            </StackPanel>
+
+            <StackPanel Grid.Row="1"
+                        Grid.Column="3"
+                        Grid.ColumnSpan="2"
+                        Margin="0,24,0,0">
+                <TextBlock x:Uid="AdditionalLabel"/>
+            </StackPanel>
+
+            <!-- Labels column -->
+            <ItemsControl x:Name="ColorTableLabels"
+                          Grid.Row="2"
+                          Grid.Column="0"
+                          Style="{StaticResource ItemsControlStyle}">
+                <StackPanel Style="{StaticResource ColorStackPanelStyle}">
+                    <TextBlock x:Uid="ColorScheme_BlackLabel"/>
+                </StackPanel>
+                <StackPanel Style="{StaticResource ColorStackPanelStyle}">
+                    <TextBlock x:Uid="ColorScheme_RedLabel"/>
+                </StackPanel>
+                <StackPanel Style="{StaticResource ColorStackPanelStyle}">
+                    <TextBlock x:Uid="ColorScheme_GreenLabel"/>
+                </StackPanel>
+                <StackPanel Style="{StaticResource ColorStackPanelStyle}">
+                    <TextBlock x:Uid="ColorScheme_YellowLabel"/>
+                </StackPanel>
+                <StackPanel Style="{StaticResource ColorStackPanelStyle}">
+                    <TextBlock x:Uid="ColorScheme_BlueLabel"/>
+                </StackPanel>
+                <StackPanel Style="{StaticResource ColorStackPanelStyle}">
+                    <TextBlock x:Uid="ColorScheme_PurpleLabel"/>
+                </StackPanel>
+                <StackPanel Style="{StaticResource ColorStackPanelStyle}">
+                    <TextBlock x:Uid="ColorScheme_CyanLabel"/>
+                </StackPanel>
+                <StackPanel Style="{StaticResource ColorStackPanelStyle}">
+                    <TextBlock x:Uid="ColorScheme_WhiteLabel"/>
+                </StackPanel>
+            </ItemsControl>
+
+            <!-- Non-bright color column -->
             <ItemsControl x:Name="ColorTableControl"
                           ItemsSource="{x:Bind CurrentNonBrightColorTable, Mode=OneWay}"
-                          Grid.Row="1"
-                          Grid.Column="0"
+                          Grid.Row="2"
+                          Grid.Column="1"
                           Style="{StaticResource ItemsControlStyle}">
 
                 <ItemsControl.ItemsPanel>
@@ -180,7 +228,7 @@ the MIT License. See LICENSE in the project root for license information. -->
                                     <Flyout>
                                         <ColorPicker Tag="{x:Bind Index, Mode=OneWay}"
                                                      Color="{x:Bind Color, Mode=OneWay}"
-                                                     ColorChanged="ColorPickerChanged"/>
+                                                     ColorChanged="NonBrightColorPickerChanged"/>
                                     </Flyout>
                                 </Button.Flyout>
                             </Button>
@@ -189,8 +237,9 @@ the MIT License. See LICENSE in the project root for license information. -->
                 </ItemsControl.ItemTemplate>
             </ItemsControl>
 
-            <ItemsControl Grid.Row="1"
-                          Grid.Column="1"
+            <!-- Bright colour column -->
+            <ItemsControl Grid.Row="2"
+                          Grid.Column="2"
                           Style="{StaticResource ItemsControlStyle}"
                           ItemsSource="{x:Bind CurrentBrightColorTable}">
 
@@ -204,15 +253,56 @@ the MIT License. See LICENSE in the project root for license information. -->
                     <DataTemplate x:DataType="local:ColorTableEntry">
                         <StackPanel Style="{StaticResource ColorStackPanelStyle}">
                             <Button Background="{x:Bind Color, Converter={StaticResource ColorToBrushConverter}, Mode=OneWay}"
-                                    ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}"/>
+                                    ToolTipService.ToolTip="{x:Bind Name, Mode=OneWay}">
+                                <Button.Resources>
+                                    <!-- Resources to colorize hover/pressed states based on the color of the button -->
+                                    <ResourceDictionary>
+                                        <ResourceDictionary.ThemeDictionaries>
+                                            <ResourceDictionary x:Key="Light">
+                                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{x:Bind Color, Converter={StaticResource ColorLightenConverter}, Mode=OneWay}"/>
+                                            </ResourceDictionary>
+                                            <ResourceDictionary x:Key="Dark">
+                                                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{x:Bind Color, Converter={StaticResource ColorLightenConverter}, Mode=OneWay}"/>
+                                            </ResourceDictionary>
+                                            <!-- No High contrast dictionary, let's just leave that unchanged. -->
+                                        </ResourceDictionary.ThemeDictionaries>
+                                    </ResourceDictionary>
+                                </Button.Resources>
+
+                                <Button.Flyout>
+                                    <Flyout>
+                                        <ColorPicker Tag="{x:Bind Index, Mode=OneWay}"
+                                                     Color="{x:Bind Color, Mode=OneWay}"
+                                                     ColorChanged="BrightColorPickerChanged"/>
+                                    </Flyout>
+                                </Button.Flyout>
+                            </Button>
                         </StackPanel>
                     </DataTemplate>
                 </ItemsControl.ItemTemplate>
             </ItemsControl>
-            
+
+            <ItemsControl x:Name="AdditionalTableLabels"
+                          Grid.Row="2"
+                          Grid.Column="3"
+                          Style="{StaticResource ItemsControlStyle}">
+                <StackPanel Style="{StaticResource ColorStackPanelStyle}">
+                    <TextBlock x:Uid="ColorScheme_ForegroundLabel"/>
+                </StackPanel>
+                <StackPanel Style="{StaticResource ColorStackPanelStyle}">
+                    <TextBlock x:Uid="ColorScheme_BackgroundLabel"/>
+                </StackPanel>
+                <StackPanel Style="{StaticResource ColorStackPanelStyle}">
+                    <TextBlock x:Uid="ColorScheme_CursorLabel"/>
+                </StackPanel>
+                <StackPanel Style="{StaticResource ColorStackPanelStyle}">
+                    <TextBlock x:Uid="ColorScheme_SelectionLabel"/>
+                </StackPanel>
+            </ItemsControl>
+
             <!-- Additional Colors (Right Column) -->
-            <ItemsControl Grid.Row="1"
-                          Grid.Column="2"
+            <ItemsControl Grid.Row="2"
+                          Grid.Column="4"
                           Style="{StaticResource ItemsControlStyle}">
                 <StackPanel Style="{StaticResource ColorStackPanelStyle}">
                     <Button x:Uid="ColorScheme_Foreground"
@@ -328,7 +418,7 @@ the MIT License. See LICENSE in the project root for license information. -->
             </ItemsControl>
 
             <!--Delete Button-->
-            <StackPanel Grid.Row="2"
+            <StackPanel Grid.Row="3"
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
                         Style="{StaticResource PivotStackStyle}">
diff --git a/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw b/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
index f3ea8965b9b..37441e8ee83 100644
--- a/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
+++ b/src/cascadia/TerminalSettingsEditor/Resources/en-US/Resources.resw
@@ -838,4 +838,46 @@
   <data name="ColorScheme_RenameErrorTip.Title" xml:space="preserve">
     <value>This color scheme name is already in use.</value>
   </data>
+  <data name="AdditionalLabel.Text" xml:space="preserve">
+    <value>Additional Colors</value>
+  </data>
+  <data name="ColorSchemeLabel.Text" xml:space="preserve">
+    <value>Color Scheme</value>
+  </data>
+  <data name="ColorScheme_BackgroundLabel.Text" xml:space="preserve">
+    <value>Background</value>
+  </data>
+  <data name="ColorScheme_BlackLabel.Text" xml:space="preserve">
+    <value>Black</value>
+  </data>
+  <data name="ColorScheme_BlueLabel.Text" xml:space="preserve">
+    <value>Blue</value>
+  </data>
+  <data name="ColorScheme_CursorLabel.Text" xml:space="preserve">
+    <value>Cursor</value>
+  </data>
+  <data name="ColorScheme_CyanLabel.Text" xml:space="preserve">
+    <value>Cyan</value>
+  </data>
+  <data name="ColorScheme_ForegroundLabel.Text" xml:space="preserve">
+    <value>Foreground</value>
+  </data>
+  <data name="ColorScheme_GreenLabel.Text" xml:space="preserve">
+    <value>Green</value>
+  </data>
+  <data name="ColorScheme_PurpleLabel.Text" xml:space="preserve">
+    <value>Purple</value>
+  </data>
+  <data name="ColorScheme_RedLabel.Text" xml:space="preserve">
+    <value>Red</value>
+  </data>
+  <data name="ColorScheme_SelectionLabel.Text" xml:space="preserve">
+    <value>Selection</value>
+  </data>
+  <data name="ColorScheme_WhiteLabel.Text" xml:space="preserve">
+    <value>White</value>
+  </data>
+  <data name="ColorScheme_YellowLabel.Text" xml:space="preserve">
+    <value>Yellow</value>
+  </data>
 </root>
\ No newline at end of file

From 3a3477f5672274b3eeb25e4c2c48ab92357198c2 Mon Sep 17 00:00:00 2001
From: Eric Tian <tian.eric@hotmail.com>
Date: Mon, 15 Feb 2021 16:47:45 -0800
Subject: [PATCH 4/4] Fix error

---
 .../TerminalSettingsEditor/ColorSchemes.cpp      | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp b/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
index bfbc9acb2f9..517df7de8c1 100644
--- a/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
+++ b/src/cascadia/TerminalSettingsEditor/ColorSchemes.cpp
@@ -319,6 +319,7 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
 
     // Function Description:
     // - Updates the currently modifiable color table based on the given current color scheme.
+    //   There are 7 non-bright colours and 7 bright colours.  
     // Arguments:
     // - colorScheme: the color scheme to retrieve the color table from
     // Return Value:
@@ -327,14 +328,13 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
     {
         for (uint8_t i = 0; i < TableColorNames.size(); ++i)
         {
-            if (i < ColorTableDivider)
-            {
-                _CurrentNonBrightColorTable.GetAt(i).Color(colorScheme.Table()[i]);
-            }
-            else
-            {
-                _CurrentBrightColorTable.GetAt(i).Color(colorScheme.Table()[i]);
-            }
+            // Fill the element of "_CurrentNonBrightColorTable" with the non-bright colors (lower index on the color scheme object's table: 0-7).
+            int indexNonBrightColor = i;
+            // Fill the element of "_CurrentBrightColorTable" with the bright colors (higher index on the color scheme object's table: 8-15).
+            int indexBrightColor = i + ColorTableDivider;
+
+            _CurrentNonBrightColorTable.GetAt(i).Color(colorScheme.Table()[indexNonBrightColor]);
+            _CurrentBrightColorTable.GetAt(i).Color(colorScheme.Table()[indexBrightColor]);
         }
     }