From bb3ebbdbe254f82752382bd90c5300f8dc72edf4 Mon Sep 17 00:00:00 2001
From: Emily Kager <ekager@mozilla.com>
Date: Wed, 20 Mar 2019 17:26:13 -0700
Subject: [PATCH] Closes #932 - Home Page UI polish

---
 .../org/mozilla/fenix/home/HomeFragment.kt    |   6 +-
 app/src/main/res/drawable/ic_share.xml        |  16 ++
 .../res/drawable/session_sheet_background.xml |  11 ++
 app/src/main/res/layout/component_tabs.xml    |  74 +++----
 .../main/res/layout/session_bottom_sheet.xml  | 182 ++++++++++--------
 .../main/res/layout/session_list_header.xml   |   3 +-
 app/src/main/res/layout/tab_list_row.xml      |  26 +--
 app/src/main/res/values/colors.xml            |   9 +-
 app/src/main/res/values/strings.xml           |   6 +-
 app/src/main/res/values/styles.xml            |  26 ++-
 10 files changed, 214 insertions(+), 145 deletions(-)
 create mode 100644 app/src/main/res/drawable/ic_share.xml
 create mode 100644 app/src/main/res/drawable/session_sheet_background.xml

diff --git a/app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt b/app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt
index 912ab36f4..a378e9f41 100644
--- a/app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt
+++ b/app/src/main/java/org/mozilla/fenix/home/HomeFragment.kt
@@ -52,7 +52,7 @@ import org.mozilla.fenix.settings.SupportUtils
 import kotlin.coroutines.CoroutineContext
 import kotlin.math.roundToInt
 
-@SuppressWarnings("TooManyFunctions")
+@SuppressWarnings("TooManyFunctions", "LargeClass")
 class HomeFragment : Fragment(), CoroutineScope {
     private val bus = ActionBusFactory.get(this)
     private var sessionObserver: SessionManager.Observer? = null
@@ -125,7 +125,9 @@ class HomeFragment : Fragment(), CoroutineScope {
                 orientation = BrowserMenu.Orientation.DOWN)
         }
 
-        view.toolbar.setCompoundDrawablesWithIntrinsicBounds(searchIcon, null, null, null)
+        val iconSize = resources.getDimension(R.dimen.preference_icon_drawable_size).toInt()
+        searchIcon.setBounds(0, 0, iconSize, iconSize)
+        view.toolbar.setCompoundDrawables(searchIcon, null, null, null)
         val roundToInt = (toolbarPaddingDp * Resources.getSystem().displayMetrics.density).roundToInt()
         view.toolbar.compoundDrawablePadding = roundToInt
         view.toolbar.setOnClickListener {
diff --git a/app/src/main/res/drawable/ic_share.xml b/app/src/main/res/drawable/ic_share.xml
new file mode 100644
index 000000000..e7b40940e
--- /dev/null
+++ b/app/src/main/res/drawable/ic_share.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M8.92,14.7338C8.1902,15.5131 7.1519,16 6,16C3.7909,16 2,14.2091 2,12C2,9.7909 3.7909,8 6,8C7.0609,8 8.0783,8.4214 8.8284,9.1716C8.86,9.2031 8.8909,9.2351 8.9213,9.2676L13.1206,6.9785C13.0418,6.6654 13,6.3376 13,6C13,3.7909 14.7909,2 17,2C19.2091,2 21,3.7909 21,6C21,8.2091 19.2091,10 17,10C15.8481,10 14.8098,9.5131 14.08,8.7338L9.879,11.0237C9.9587,11.3403 10,11.668 10,12C10,12.3376 9.9582,12.6654 9.8794,12.9785L14.0787,15.2675C14.8087,14.4875 15.8474,14 17,14C19.2091,14 21,15.7909 21,18C21,20.2091 19.2091,22 17,22C14.7909,22 13,20.2091 13,18C13,17.6631 13.0417,17.3358 13.1201,17.0232L8.92,14.7338ZM17,4C15.8954,4 15,4.8954 15,6C15,7.1046 15.8954,8 17,8C18.1046,8 19,7.1046 19,6C19,4.8954 18.1046,4 17,4ZM6,10C4.8954,10 4,10.8954 4,12C4,13.1046 4.8954,14 6,14C7.1046,14 8,13.1046 8,12C8,10.8954 7.1046,10 6,10ZM17,16C15.8954,16 15,16.8954 15,18C15,19.1046 15.8954,20 17,20C18.1046,20 19,19.1046 19,18C19,16.8954 18.1046,16 17,16Z"
+      android:strokeWidth="1"
+      android:fillColor="?attr/iconColor"
+      android:fillType="nonZero"
+      android:strokeColor="#00000000"/>
+</vector>
diff --git a/app/src/main/res/drawable/session_sheet_background.xml b/app/src/main/res/drawable/session_sheet_background.xml
new file mode 100644
index 000000000..43f91c6b7
--- /dev/null
+++ b/app/src/main/res/drawable/session_sheet_background.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+    <gradient
+        android:startColor="#393473"
+        android:endColor="#20123A"
+        android:type="linear" />
+</shape>
diff --git a/app/src/main/res/layout/component_tabs.xml b/app/src/main/res/layout/component_tabs.xml
index 6425640cf..380733140 100644
--- a/app/src/main/res/layout/component_tabs.xml
+++ b/app/src/main/res/layout/component_tabs.xml
@@ -2,15 +2,15 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<merge
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<merge xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto">
+
     <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/tabs_header"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginTop="8dp"
         android:layout_marginStart="16dp"
+        android:layout_marginTop="8dp"
         android:layout_marginEnd="8dp"
         android:visibility="gone">
 
@@ -19,8 +19,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:text="@string/tabs_header_title"
-            android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
-            android:textColor="?attr/toolbarTextColor"
+            android:textAppearance="@style/headerText"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
@@ -30,9 +29,9 @@
             android:layout_width="@dimen/glyph_button_width"
             android:layout_height="@dimen/glyph_button_height"
             android:background="?android:attr/selectableItemBackgroundBorderless"
+            android:contentDescription="@string/add_tab"
             android:src="@drawable/ic_new"
             android:tint="?attr/toolbarTextColor"
-            android:contentDescription="@string/add_tab"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toStartOf="@id/tabs_overflow_button"
             app:layout_constraintTop_toTopOf="parent" />
@@ -42,72 +41,75 @@
             android:layout_width="@dimen/glyph_button_width"
             android:layout_height="@dimen/glyph_button_height"
             android:background="?android:attr/selectableItemBackgroundBorderless"
+            android:contentDescription="@string/tab_menu"
             android:src="@drawable/ic_menu"
             android:tint="?attr/toolbarTextColor"
-            android:contentDescription="@string/tab_menu"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
     </androidx.constraintlayout.widget.ConstraintLayout>
-    <androidx.recyclerview.widget.RecyclerView
-        xmlns:android="http://schemas.android.com/apk/res/android"
+
+    <androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/tabs_list"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:padding="16dp"
-        android:clipToPadding="false"/>
+        android:clipToPadding="false"
+        android:padding="12dp"/>
 
     <FrameLayout
         android:id="@+id/save_session_button"
-        android:foreground="?android:attr/selectableItemBackground"
-        android:background="@drawable/button_background"
-        android:backgroundTint="@color/photonInk70"
+        android:layout_width="match_parent"
+        android:layout_height="36dp"
         android:layout_margin="16dp"
-        android:padding="6dp"
+        android:background="@drawable/button_background"
+        android:backgroundTint="@color/save_session_button_color"
         android:clickable="true"
         android:focusable="true"
-        android:visibility="gone"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content">
+        android:foreground="?android:attr/selectableItemBackground"
+        android:padding="6dp"
+        android:visibility="gone">
+
         <TextView
             android:id="@+id/save_session_button_text"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:text="@string/session_save"
-            android:textColor="@color/photonWhite"
+            android:layout_gravity="center"
+            android:clickable="false"
             android:drawableStart="@drawable/ic_archive"
             android:drawablePadding="8dp"
-            android:textSize="16sp"
-            android:gravity="center"
-            android:clickable="false"
             android:focusable="false"
-            android:layout_gravity="center" />
+            android:gravity="center"
+            android:textStyle="bold"
+            android:text="@string/session_save"
+            android:textColor="@color/photonWhite" />
     </FrameLayout>
 
     <FrameLayout
         android:id="@+id/delete_session_button"
-        android:foreground="?android:attr/selectableItemBackground"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="16dp"
         android:background="@drawable/button_background"
         android:backgroundTint="@color/delete_session_button_background"
-        android:layout_margin="16dp"
-        android:padding="6dp"
         android:clickable="true"
         android:focusable="true"
-        android:visibility="gone"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content">
+        android:foreground="?android:attr/selectableItemBackground"
+        android:padding="6dp"
+        android:visibility="gone">
+
         <TextView
             android:id="@+id/delete_session_button_text"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:text="@string/session_delete"
-            android:textColor="@color/color_primary_dark"
+            android:layout_gravity="center"
+            android:clickable="false"
             android:drawableStart="@drawable/ic_delete"
             android:drawablePadding="8dp"
-            android:textSize="16sp"
-            android:gravity="center"
-            android:clickable="false"
             android:focusable="false"
-            android:layout_gravity="center" />
+            android:textStyle="bold"
+            android:gravity="center"
+            android:text="@string/session_delete"
+            android:textColor="@color/color_primary_dark"
+            android:textSize="16sp" />
     </FrameLayout>
 </merge>
\ No newline at end of file
diff --git a/app/src/main/res/layout/session_bottom_sheet.xml b/app/src/main/res/layout/session_bottom_sheet.xml
index 2bb109701..1165d6667 100644
--- a/app/src/main/res/layout/session_bottom_sheet.xml
+++ b/app/src/main/res/layout/session_bottom_sheet.xml
@@ -2,101 +2,121 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<LinearLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
-    android:orientation="vertical"
-    app:layout_behavior="@string/bottom_sheet_behavior"
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    android:orientation="vertical"
+    app:layout_behavior="@string/bottom_sheet_behavior">
 
     <androidx.cardview.widget.CardView
-            android:id="@+id/current_session_card"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_margin="16dp"
-            app:cardCornerRadius="10dp"
-            android:padding="10dp"
-            android:elevation="5dp"
-            android:background="?android:attr/colorBackground"
-    >
+        android:id="@+id/current_session_card"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="16dp"
+        android:background="?android:attr/colorBackground"
+        android:elevation="5dp"
+        android:padding="10dp"
+        app:cardCornerRadius="10dp">
+
         <androidx.constraintlayout.widget.ConstraintLayout
-                android:layout_width="match_parent"
-                android:layout_height="match_parent">
+            android:layout_width="match_parent"
+            android:layout_height="match_parent">
 
             <ImageView
-                    android:id="@+id/current_session_image"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_margin="10dp"
-                    android:paddingBottom="20dp"
-                    android:src="@drawable/ic_session_thumbnail_placeholder_blue"
-                    app:layout_constraintTop_toTopOf="parent"
-                    app:layout_constraintStart_toStartOf="parent"
-                    android:contentDescription="@string/current_session_image"/>
+                android:id="@+id/current_session_image"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_margin="12dp"
+                android:contentDescription="@string/current_session_image"
+                android:paddingBottom="20dp"
+                android:src="@drawable/ic_session_thumbnail_placeholder_blue"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent" />
 
             <TextView
-                    android:id="@+id/current_session_card_title"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:layout_margin="10dp"
-                    android:text="@string/tabs_header_title"
-                    android:textSize="18sp"
-                    app:layout_constraintTop_toTopOf="parent"
-                    app:layout_constraintStart_toEndOf="@id/current_session_image"
-            />
+                android:id="@+id/current_session_card_title"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="12dp"
+                android:layout_marginStart="12dp"
+                android:layout_marginEnd="12dp"
+                android:layout_marginBottom="8dp"
+                android:text="@string/tabs_header_title"
+                android:textAppearance="@style/headerText"
+                app:layout_constraintStart_toEndOf="@id/current_session_image"
+                app:layout_constraintTop_toTopOf="parent" />
 
             <TextView
-                    android:id="@+id/current_session_card_tab_list"
-                    android:layout_width="0dp"
-                    android:layout_height="0dp"
-                    android:layout_marginStart="10dp"
-                    android:layout_marginEnd="10dp"
-                    android:layout_marginBottom="10dp"
-                    android:textSize="12sp"
-                    app:layout_constraintTop_toBottomOf="@id/current_session_card_title"
-                    app:layout_constraintStart_toEndOf="@id/current_session_image"
-                    app:layout_constraintEnd_toEndOf="parent"
-                    app:layout_constraintHorizontal_bias="0"
-                    app:layout_constraintBottom_toBottomOf="parent"
-                    app:layout_constraintVertical_bias="0"
-                    android:requiresFadingEdge="vertical"
-                    android:fadingEdgeLength="48dp"
-                    tools:text="@tools:sample/lorem/random"
-            />
+                android:id="@+id/current_session_card_tab_list"
+                android:layout_width="0dp"
+                android:layout_height="0dp"
+                android:layout_marginStart="12dp"
+                android:layout_marginEnd="10dp"
+                android:layout_marginBottom="10dp"
+                android:fadingEdgeLength="48dp"
+                android:requiresFadingEdge="vertical"
+                android:textAppearance="@style/TextAppearance.MaterialComponents.Caption"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHorizontal_bias="0"
+                app:layout_constraintStart_toEndOf="@id/current_session_image"
+                app:layout_constraintTop_toBottomOf="@id/current_session_card_title"
+                app:layout_constraintVertical_bias="0"
+                tools:text="@tools:sample/lorem/random" />
 
         </androidx.constraintlayout.widget.ConstraintLayout>
     </androidx.cardview.widget.CardView>
 
-    <TextView android:layout_width="match_parent"
-              android:layout_height="wrap_content"
-              android:id="@+id/delete_session_button"
-              android:padding="12dp"
-              android:text="@string/current_session_delete"
-              android:textSize="18sp"
-              android:textColor="@color/photonRed60"
-              android:background="?android:attr/colorBackground"
-              android:drawableStart="@drawable/ic_delete"
-              android:drawablePadding="10dp"
-              android:drawableTint="@color/photonRed60" tools:targetApi="m"/>
+    <TextView
+        android:id="@+id/delete_session_button"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="?android:attr/colorBackground"
+        android:drawableStart="@drawable/ic_delete"
+        android:drawablePadding="14dp"
+        android:drawableTint="@color/photonRed60"
+        android:paddingStart="20dp"
+        android:paddingTop="12dp"
+        android:paddingBottom="12dp"
+        android:text="@string/current_session_delete"
+        android:textColor="@color/photonRed60"
+        android:textSize="16sp"
+        tools:targetApi="m" />
 
-    <TextView android:layout_width="match_parent"
-              android:layout_height="wrap_content"
-              android:id="@+id/archive_session_button"
-              android:padding="12dp"
-              android:text="@string/current_session_archive"
-              android:textSize="18sp"
-              android:background="?android:attr/colorBackground"
-              android:drawableStart="@drawable/ic_archive"
-              android:drawablePadding="10dp"/>
+    <View
+        android:layout_width="match_parent"
+        android:layout_height="1dp"
+        android:background="@color/photonGrey30" />
+
+    <TextView
+        android:id="@+id/archive_session_button"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="?android:attr/colorBackground"
+        android:drawableStart="@drawable/ic_archive"
+        android:drawablePadding="14dp"
+        android:paddingStart="20dp"
+        android:paddingTop="12dp"
+        android:paddingBottom="12dp"
+        android:text="@string/current_session_save"
+        android:textColor="@color/light_mode_bottom_sheet_text_color"
+        android:textSize="16sp" />
+
+    <TextView
+        android:id="@+id/send_and_share_session_button"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="?android:attr/colorBackground"
+        android:drawableStart="@drawable/ic_share"
+        android:drawablePadding="14dp"
+        android:drawableTint="@color/icons_light_mode"
+        android:paddingStart="20dp"
+        android:paddingTop="12dp"
+        android:paddingBottom="12dp"
+        android:text="@string/current_session_share"
+        android:textColor="@color/light_mode_bottom_sheet_text_color"
+        android:textSize="16sp" />
 
-    <TextView android:layout_width="match_parent"
-              android:layout_height="wrap_content"
-              android:id="@+id/send_and_share_session_button"
-              android:padding="12dp"
-              android:text="@string/current_session_send_and_share"
-              android:textSize="18sp"
-              android:background="?android:attr/colorBackground"
-              android:drawableStart="@drawable/ic_send"
-              android:drawablePadding="10dp"/>
 </LinearLayout>
\ No newline at end of file
diff --git a/app/src/main/res/layout/session_list_header.xml b/app/src/main/res/layout/session_list_header.xml
index 8e8a421bb..5a120a0fb 100644
--- a/app/src/main/res/layout/session_list_header.xml
+++ b/app/src/main/res/layout/session_list_header.xml
@@ -5,8 +5,7 @@
 <TextView xmlns:android="http://schemas.android.com/apk/res/android"
           android:id="@+id/header_text"
           android:layout_marginBottom="8dp"
-          android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
-          android:textColor="?attr/toolbarTextColor"
+          android:textAppearance="@style/headerText"
           android:layout_width="match_parent"
           android:layout_height="wrap_content">
 </TextView>
diff --git a/app/src/main/res/layout/tab_list_row.xml b/app/src/main/res/layout/tab_list_row.xml
index c3cabaa51..dd4f758da 100644
--- a/app/src/main/res/layout/tab_list_row.xml
+++ b/app/src/main/res/layout/tab_list_row.xml
@@ -21,8 +21,8 @@
             android:id="@+id/favicon_image"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:contentDescription="@string/favicon_content_description"
             android:layout_margin="10dp"
+            android:contentDescription="@string/favicon_content_description"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
@@ -30,12 +30,13 @@
             android:id="@+id/text_url"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:ellipsize="end"
-            android:maxLines="1"
-            android:textColor="?attr/toolbarTextColor"
-            android:textSize="18sp"
+            android:layout_marginStart="12dp"
             android:layout_marginTop="4dp"
-            android:layout_marginStart="10dp"
+            android:ellipsize="none"
+            android:requiresFadingEdge="horizontal"
+            android:singleLine="true"
+            android:textColor="?attr/toolbarTextColor"
+            android:textSize="16sp"
             app:layout_constraintEnd_toStartOf="@id/close_tab_button"
             app:layout_constraintHorizontal_bias="0"
             app:layout_constraintStart_toEndOf="@id/favicon_image"
@@ -45,21 +46,22 @@
             android:id="@+id/close_tab_button"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:layout_marginTop="1dp"
             android:contentDescription="@string/close_tab"
+            android:paddingStart="12dp"
             android:paddingEnd="10dp"
             android:src="@drawable/ic_close"
-            android:layout_marginTop="1dp"
-            app:layout_constraintTop_toTopOf="@id/text_url"
             app:layout_constraintBottom_toBottomOf="@id/text_url"
-            app:layout_constraintEnd_toEndOf="parent" />
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="@id/text_url" />
 
         <ImageView
             android:id="@+id/tab_background"
             android:layout_width="0dp"
             android:layout_height="100dp"
             android:layout_marginTop="10dp"
-            android:focusable="false"
             android:adjustViewBounds="false"
+            android:focusable="false"
             android:scaleType="centerCrop"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
@@ -71,9 +73,9 @@
             android:layout_width="0dp"
             android:layout_height="0dp"
             android:background="@drawable/session_border"
-            app:layout_constraintTop_toTopOf="parent"
             app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toEndOf="parent" />
+            app:layout_constraintTop_toTopOf="parent" />
     </androidx.constraintlayout.widget.ConstraintLayout>
 </androidx.cardview.widget.CardView>
\ No newline at end of file
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index f38c7b041..2b8688976 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -8,6 +8,7 @@
     <color name="color_accent">#D81B60</color>
 
     <color name="history_delete_button_background">#F2F2F5</color>
+    <color name="light_mode_text_color">#20123A</color>
 
     <color name="awesome_bar_title_color">#212121</color>
     <color name="awesome_bar_description_color">#6b6b6b</color>
@@ -22,9 +23,11 @@
     <color name="search_text">#0C0C0D</color>
     <color name="off_white">#f9f9fa</color>
     <color name="url_box_view">#E9E9ED</color>
-    <color name="session_border_color">@color/photonInk70</color>
+    <color name="session_border_color">#592ACB</color>
+    <color name="save_session_button_color">#352F65</color>
+    <color name="light_mode_bottom_sheet_text_color">#232749</color>
 
-    <color name="icons_light_mode">#20233E</color>
+    <color name="icons_light_mode">#20123A</color>
     <color name="disabled_icons_light_mode">#8020233E</color>
 
     <color name="icons_dark_mode">@color/off_white</color>
@@ -67,7 +70,7 @@
     <color name="library_key_icon">#C13905</color>
 
     <color name="history_header_light_theme">#696A6A</color>
-    <color name="history_title_light_theme">#000000</color>
+    <color name="history_title_light_theme">@color/light_mode_text_color</color>
     <color name="history_url_light_theme">#696A6A</color>
 
     <color name="history_header_private_theme">@color/photonGrey40</color>
diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml
index 236298c0f..2582b4b92 100644
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -192,10 +192,10 @@
     <string name="favicon_content_description">Bookmark</string>
     <!-- Button in the current session menu. Deletes the session when pressed -->
     <string name="current_session_delete">Delete</string>
-    <!-- Button in the current session menu. Archives the session when pressed -->
-    <string name="current_session_archive">Archive</string>
+    <!-- Button in the current session menu. Saves the session when pressed -->
+    <string name="current_session_save">Save</string>
     <!-- Button in the current session menu. Opens the share menu when pressed -->
-    <string name="current_session_send_and_share">Send and Share</string>
+    <string name="current_session_share">Share</string>
     <!-- Content description (not visible, for screen readers etc.): Title icon for current session menu -->
     <string name="current_session_image">Current session image</string>
     <!-- Text for the button to save a session -->
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
index 2002b29fe..5188e79e5 100644
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -5,7 +5,7 @@
 <resources>
 
     <style name="LightThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
-        <item name="android:statusBarColor">@android:color/black</item>
+        <item name="android:statusBarColor">@color/off_white</item>
         <item name="android:windowAnimationStyle">@style/WindowAnimationTransition</item>
         <item name="android:colorPrimary">@color/off_white</item>
         <item name="android:windowBackground">@color/off_white</item>
@@ -33,9 +33,9 @@
         <item name="privateBrowsingButtonBackground">?android:attr/selectableItemBackgroundBorderless</item>
         <item name="privateBrowsingButtonTint">@color/off_white</item>
         <item name="fenixLogo">@drawable/ic_logo_wordmark</item>
-        <item name="menuButtonTint">@android:color/black</item>
+        <item name="menuButtonTint">@color/light_mode_text_color</item>
         <item name="toolbarWrapperBackground">@drawable/home_search_background_light</item>
-        <item name="toolbarTextColor">@color/search_text</item>
+        <item name="toolbarTextColor">@color/light_mode_text_color</item>
         <item name="homeDividerColor">@color/photonGrey30</item>
         <item name="sessionBackgroundColor">@color/photonWhite</item>
         <item name="sessionBorderColor">@color/session_border_color</item>
@@ -141,12 +141,26 @@
         <item name="android:background">@drawable/search_pill_background</item>
     </style>
 
-    <style name="CurrentSessionBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
+    <style name="CurrentSessionBottomSheetDialogTheme" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
         <item name="bottomSheetStyle">@style/CurrentSessionBottomSheetStyle</item>
+        <item name="android:textColor">@color/light_mode_text_color</item>
+
+        <!-- This doesn't seem to work see https://issuetracker.google.com/issues/120426520 -->
+        <item name="scrimBackground">@drawable/session_sheet_background</item>
     </style>
 
-    <style name="CurrentSessionBottomSheetStyle" parent="Widget.Design.BottomSheet.Modal">
+    <style name="CurrentSessionBottomSheetStyle" parent="Theme.MaterialComponents.Light.BottomSheetDialog">
         <item name="android:background">@android:color/transparent</item>
-        <item name="android:textColor">@android:color/black</item>
+        <item name="android:textColor">@color/light_mode_text_color</item>
+
+        <!-- This doesn't seem to work see https://issuetracker.google.com/issues/120426520 -->
+        <item name="scrimBackground">@drawable/session_sheet_background</item>
+    </style>
+
+    <style name="headerText" parent="TextAppearance.MaterialComponents.Subtitle1">
+        <item name="android:textSize">18sp</item>
+        <item name="android:textColor">?attr/toolbarTextColor</item>
+        <item name="android:textStyle">bold</item>
+        <item name="android:letterSpacing">0.03</item>
     </style>
 </resources>