From 392b1adcb342536f03743fbd0b18d99f1d58afdb Mon Sep 17 00:00:00 2001
From: Vraj Desai <43074241+vrajdesai78@users.noreply.github.com>
Date: Wed, 1 Sep 2021 22:22:24 +0530
Subject: [PATCH] Fixes #3465 Merge completed activity into single file (#3689)

* Completed_story merge into single file

* Completed_story_activity completed into single file

* Update dimens.xml

* Update completed_story_item.xml

* Update completed_story_list_fragment.xml

* Update dimens.xml

* Update dimens.xml

* Update dimens.xml
---
 .../res/layout-land/completed_story_item.xml  | 98 -------------------
 .../completed_story_list_fragment.xml         | 69 -------------
 .../completed_story_item.xml                  | 96 ------------------
 .../completed_story_list_fragment.xml         | 69 -------------
 .../completed_story_item.xml                  | 97 ------------------
 .../completed_story_list_fragment.xml         | 69 -------------
 .../main/res/layout/completed_story_item.xml  | 12 ++-
 .../layout/completed_story_list_fragment.xml  |  8 +-
 app/src/main/res/values-land/dimens.xml       | 12 +++
 .../main/res/values-sw600dp-land/dimens.xml   | 12 +++
 .../main/res/values-sw600dp-port/dimens.xml   | 13 +++
 app/src/main/res/values/dimens.xml            | 12 +++
 12 files changed, 60 insertions(+), 507 deletions(-)
 delete mode 100755 app/src/main/res/layout-land/completed_story_item.xml
 delete mode 100644 app/src/main/res/layout-land/completed_story_list_fragment.xml
 delete mode 100644 app/src/main/res/layout-sw600dp-land/completed_story_item.xml
 delete mode 100644 app/src/main/res/layout-sw600dp-land/completed_story_list_fragment.xml
 delete mode 100644 app/src/main/res/layout-sw600dp-port/completed_story_item.xml
 delete mode 100644 app/src/main/res/layout-sw600dp-port/completed_story_list_fragment.xml

diff --git a/app/src/main/res/layout-land/completed_story_item.xml b/app/src/main/res/layout-land/completed_story_item.xml
deleted file mode 100755
index 8f42676f967..00000000000
--- a/app/src/main/res/layout-land/completed_story_item.xml
+++ /dev/null
@@ -1,98 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:app="http://schemas.android.com/apk/res-auto">
-
-  <data>
-
-    <import type="android.view.View" />
-
-    <variable
-      name="viewModel"
-      type="org.oppia.android.app.completedstorylist.CompletedStoryItemViewModel" />
-  </data>
-
-  <com.google.android.material.card.MaterialCardView
-    android:id="@+id/topic_container"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:layout_marginStart="16dp"
-    android:layout_marginTop="12dp"
-    android:layout_marginEnd="16dp"
-    android:layout_marginBottom="12dp"
-    android:clickable="true"
-    android:focusable="true"
-    android:onClick="@{(v) -> viewModel.onCompletedStoryItemClicked()}"
-    app:cardCornerRadius="4dp"
-    app:cardElevation="4dp">
-
-    <androidx.constraintlayout.widget.ConstraintLayout
-      android:layout_width="match_parent"
-      android:layout_height="match_parent">
-
-      <org.oppia.android.app.customview.LessonThumbnailImageView
-        android:id="@+id/completed_story_lesson_thumbnail"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:contentDescription="@{viewModel.completedStory.storyName}"
-        android:importantForAccessibility="no"
-        app:entityId="@{viewModel.completedStory.storyId}"
-        app:entityType="@{viewModel.entityType}"
-        app:layout_constraintDimensionRatio="4:3"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        app:lessonThumbnail="@{viewModel.completedStory.lessonThumbnail}" />
-
-      <androidx.constraintlayout.widget.ConstraintLayout
-        android:id="@+id/constraintLayout"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:background="@color/white"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/completed_story_lesson_thumbnail">
-
-        <TextView
-          android:id="@+id/completed_story_name_text_view"
-          android:layout_width="match_parent"
-          android:layout_height="wrap_content"
-          android:layout_marginStart="8dp"
-          android:layout_marginTop="8dp"
-          android:layout_marginEnd="8dp"
-          android:ellipsize="end"
-          android:fontFamily="sans-serif"
-          android:gravity="start"
-          android:maxLines="2"
-          android:minLines="2"
-          android:text="@{viewModel.completedStory.storyName}"
-          android:textAlignment="viewStart"
-          android:textColor="@color/oppiaPrimaryText"
-          android:textSize="14sp"
-          android:textStyle="bold"
-          app:layout_constraintStart_toStartOf="parent"
-          app:layout_constraintTop_toTopOf="parent" />
-
-        <TextView
-          android:id="@+id/completed_story_topic_name_text_view"
-          android:layout_width="match_parent"
-          android:layout_height="wrap_content"
-          android:layout_marginStart="8dp"
-          android:layout_marginTop="4dp"
-          android:layout_marginEnd="8dp"
-          android:ellipsize="end"
-          android:fontFamily="sans-serif-light"
-          android:maxLines="1"
-          android:minLines="1"
-          android:paddingBottom="12dp"
-          android:text="@{viewModel.completedStory.topicName}"
-          android:textAlignment="viewStart"
-          android:textAllCaps="true"
-          android:textColor="@color/oppiaStrokeBlack"
-          android:textSize="14sp"
-          app:layout_constraintStart_toStartOf="parent"
-          app:layout_constraintTop_toBottomOf="@+id/completed_story_name_text_view" />
-      </androidx.constraintlayout.widget.ConstraintLayout>
-    </androidx.constraintlayout.widget.ConstraintLayout>
-  </com.google.android.material.card.MaterialCardView>
-</layout>
diff --git a/app/src/main/res/layout-land/completed_story_list_fragment.xml b/app/src/main/res/layout-land/completed_story_list_fragment.xml
deleted file mode 100644
index e3f8827ee59..00000000000
--- a/app/src/main/res/layout-land/completed_story_list_fragment.xml
+++ /dev/null
@@ -1,69 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:app="http://schemas.android.com/apk/res-auto">
-
-  <data>
-
-    <variable
-      name="viewModel"
-      type="org.oppia.android.app.completedstorylist.CompletedStoryListViewModel" />
-  </data>
-
-  <androidx.constraintlayout.widget.ConstraintLayout
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:background="@color/white">
-
-    <com.google.android.material.appbar.AppBarLayout
-      android:id="@+id/completed_story_list_app_bar_layout"
-      android:layout_width="0dp"
-      android:layout_height="wrap_content"
-      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
-      app:layout_constraintEnd_toEndOf="parent"
-      app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toTopOf="parent">
-
-      <androidx.appcompat.widget.Toolbar
-        android:id="@+id/completed_story_list_toolbar"
-        android:layout_width="match_parent"
-        android:layout_height="?attr/actionBarSize"
-        android:background="?attr/colorPrimary"
-        android:fontFamily="sans-serif"
-        android:minHeight="?attr/actionBarSize"
-        app:navigationContentDescription="@string/navigate_up"
-        app:navigationIcon="?attr/homeAsUpIndicator"
-        app:title="@string/completed_story_list_activity_title"
-        app:titleTextAppearance="@style/ToolbarTextAppearance"
-        app:titleTextColor="@color/white" />
-    </com.google.android.material.appbar.AppBarLayout>
-
-    <FrameLayout
-      android:layout_width="0dp"
-      android:layout_height="0dp"
-      app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintEnd_toEndOf="parent"
-      app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toBottomOf="@id/completed_story_list_app_bar_layout">
-
-      <androidx.recyclerview.widget.RecyclerView
-        android:id="@+id/completed_story_list"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:clipToPadding="false"
-        android:overScrollMode="never"
-        android:paddingStart="56dp"
-        android:paddingTop="28dp"
-        android:paddingEnd="56dp"
-        android:paddingBottom="88dp"
-        android:scrollbars="none"
-        android:tag="@string/completed_story_list_recyclerview_tag"
-        app:data="@{viewModel.completedStoryListLiveData}" />
-
-      <View
-        android:id="@+id/completed_story_list_shadow_view"
-        android:layout_width="match_parent"
-        android:layout_height="6dp"
-        android:background="@drawable/toolbar_drop_shadow" />
-    </FrameLayout>
-  </androidx.constraintlayout.widget.ConstraintLayout>
-</layout>
diff --git a/app/src/main/res/layout-sw600dp-land/completed_story_item.xml b/app/src/main/res/layout-sw600dp-land/completed_story_item.xml
deleted file mode 100644
index 1b9229b289e..00000000000
--- a/app/src/main/res/layout-sw600dp-land/completed_story_item.xml
+++ /dev/null
@@ -1,96 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:app="http://schemas.android.com/apk/res-auto">
-
-  <data>
-
-    <import type="android.view.View" />
-
-    <variable
-      name="viewModel"
-      type="org.oppia.android.app.completedstorylist.CompletedStoryItemViewModel" />
-  </data>
-
-  <com.google.android.material.card.MaterialCardView
-    android:id="@+id/topic_container"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:layout_marginStart="32dp"
-    android:layout_marginTop="24dp"
-    android:layout_marginEnd="32dp"
-    android:clickable="true"
-    android:focusable="true"
-    android:onClick="@{(v) -> viewModel.onCompletedStoryItemClicked()}"
-    app:cardCornerRadius="4dp"
-    app:cardElevation="4dp">
-
-    <androidx.constraintlayout.widget.ConstraintLayout
-      android:layout_width="match_parent"
-      android:layout_height="match_parent">
-
-      <org.oppia.android.app.customview.LessonThumbnailImageView
-        android:id="@+id/completed_story_lesson_thumbnail"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:contentDescription="@{viewModel.completedStory.storyName}"
-        android:importantForAccessibility="no"
-        app:entityId="@{viewModel.completedStory.storyId}"
-        app:entityType="@{viewModel.entityType}"
-        app:layout_constraintDimensionRatio="4:3"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        app:lessonThumbnail="@{viewModel.completedStory.lessonThumbnail}"
-        app:topRoundedRectDrawableWithColor="@{viewModel.completedStory.lessonThumbnail.backgroundColorRgb}" />
-
-      <androidx.constraintlayout.widget.ConstraintLayout
-        android:id="@+id/constraintLayout"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:background="@color/white"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/completed_story_lesson_thumbnail">
-
-        <TextView
-          android:id="@+id/completed_story_name_text_view"
-          android:layout_width="match_parent"
-          android:layout_height="wrap_content"
-          android:layout_marginStart="8dp"
-          android:layout_marginTop="8dp"
-          android:layout_marginEnd="8dp"
-          android:ellipsize="end"
-          android:fontFamily="sans-serif"
-          android:gravity="start"
-          android:lines="2"
-          android:text="@{viewModel.completedStory.storyName}"
-          android:textAlignment="viewStart"
-          android:textColor="@color/oppiaPrimaryText"
-          android:textSize="14sp"
-          android:textStyle="bold"
-          app:layout_constraintStart_toStartOf="parent"
-          app:layout_constraintTop_toTopOf="parent" />
-
-        <TextView
-          android:id="@+id/completed_story_topic_name_text_view"
-          android:layout_width="match_parent"
-          android:layout_height="wrap_content"
-          android:layout_marginStart="8dp"
-          android:layout_marginTop="4dp"
-          android:layout_marginEnd="8dp"
-          android:ellipsize="end"
-          android:fontFamily="sans-serif-light"
-          android:lines="1"
-          android:paddingBottom="12dp"
-          android:text="@{viewModel.completedStory.topicName}"
-          android:textAlignment="viewStart"
-          android:textAllCaps="true"
-          android:textColor="@color/oppiaStrokeBlack"
-          android:textSize="14sp"
-          app:layout_constraintStart_toStartOf="parent"
-          app:layout_constraintTop_toBottomOf="@+id/completed_story_name_text_view" />
-      </androidx.constraintlayout.widget.ConstraintLayout>
-    </androidx.constraintlayout.widget.ConstraintLayout>
-  </com.google.android.material.card.MaterialCardView>
-</layout>
diff --git a/app/src/main/res/layout-sw600dp-land/completed_story_list_fragment.xml b/app/src/main/res/layout-sw600dp-land/completed_story_list_fragment.xml
deleted file mode 100644
index 040270a6fd4..00000000000
--- a/app/src/main/res/layout-sw600dp-land/completed_story_list_fragment.xml
+++ /dev/null
@@ -1,69 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:app="http://schemas.android.com/apk/res-auto">
-
-  <data>
-
-    <variable
-      name="viewModel"
-      type="org.oppia.android.app.completedstorylist.CompletedStoryListViewModel" />
-  </data>
-
-  <androidx.constraintlayout.widget.ConstraintLayout
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:background="@color/white">
-
-    <com.google.android.material.appbar.AppBarLayout
-      android:id="@+id/completed_story_list_app_bar_layout"
-      android:layout_width="0dp"
-      android:layout_height="wrap_content"
-      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
-      app:layout_constraintEnd_toEndOf="parent"
-      app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toTopOf="parent">
-
-      <androidx.appcompat.widget.Toolbar
-        android:id="@+id/completed_story_list_toolbar"
-        android:layout_width="match_parent"
-        android:layout_height="?attr/actionBarSize"
-        android:background="?attr/colorPrimary"
-        android:fontFamily="sans-serif"
-        android:minHeight="?attr/actionBarSize"
-        app:navigationContentDescription="@string/navigate_up"
-        app:navigationIcon="?attr/homeAsUpIndicator"
-        app:title="@string/completed_story_list_activity_title"
-        app:titleTextAppearance="@style/ToolbarTextAppearance"
-        app:titleTextColor="@color/white" />
-    </com.google.android.material.appbar.AppBarLayout>
-
-    <FrameLayout
-      android:layout_width="0dp"
-      android:layout_height="0dp"
-      app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintEnd_toEndOf="parent"
-      app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toBottomOf="@id/completed_story_list_app_bar_layout">
-
-      <androidx.recyclerview.widget.RecyclerView
-        android:id="@+id/completed_story_list"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:clipToPadding="false"
-        android:overScrollMode="never"
-        android:paddingStart="64dp"
-        android:paddingTop="24dp"
-        android:paddingEnd="64dp"
-        android:paddingBottom="112dp"
-        android:scrollbars="none"
-        android:tag="@string/completed_story_list_recyclerview_tag"
-        app:data="@{viewModel.completedStoryListLiveData}" />
-
-      <View
-        android:id="@+id/completed_story_list_shadow_view"
-        android:layout_width="match_parent"
-        android:layout_height="6dp"
-        android:background="@drawable/toolbar_drop_shadow" />
-    </FrameLayout>
-  </androidx.constraintlayout.widget.ConstraintLayout>
-</layout>
diff --git a/app/src/main/res/layout-sw600dp-port/completed_story_item.xml b/app/src/main/res/layout-sw600dp-port/completed_story_item.xml
deleted file mode 100644
index 0b51a62cc3d..00000000000
--- a/app/src/main/res/layout-sw600dp-port/completed_story_item.xml
+++ /dev/null
@@ -1,97 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:app="http://schemas.android.com/apk/res-auto">
-
-  <data>
-
-    <import type="android.view.View" />
-
-    <variable
-      name="viewModel"
-      type="org.oppia.android.app.completedstorylist.CompletedStoryItemViewModel" />
-  </data>
-
-  <com.google.android.material.card.MaterialCardView
-    android:id="@+id/topic_container"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:layout_marginStart="24dp"
-    android:layout_marginTop="36dp"
-    android:layout_marginEnd="24dp"
-    android:clickable="true"
-    android:focusable="true"
-    android:onClick="@{(v) -> viewModel.onCompletedStoryItemClicked()}"
-    app:cardCornerRadius="4dp"
-    app:cardElevation="4dp">
-
-    <androidx.constraintlayout.widget.ConstraintLayout
-      android:layout_width="match_parent"
-      android:layout_height="match_parent">
-
-      <org.oppia.android.app.customview.LessonThumbnailImageView
-        android:id="@+id/completed_story_lesson_thumbnail"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:contentDescription="@{viewModel.completedStory.storyName}"
-        android:importantForAccessibility="no"
-        android:scaleType="centerInside"
-        app:entityId="@{viewModel.completedStory.storyId}"
-        app:entityType="@{viewModel.entityType}"
-        app:layout_constraintDimensionRatio="4:3"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        app:lessonThumbnail="@{viewModel.completedStory.lessonThumbnail}"
-        app:topRoundedRectDrawableWithColor="@{viewModel.completedStory.lessonThumbnail.backgroundColorRgb}" />
-
-      <androidx.constraintlayout.widget.ConstraintLayout
-        android:id="@+id/constraintLayout"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:background="@color/white"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/completed_story_lesson_thumbnail">
-
-        <TextView
-          android:id="@+id/completed_story_name_text_view"
-          android:layout_width="match_parent"
-          android:layout_height="wrap_content"
-          android:layout_marginStart="8dp"
-          android:layout_marginTop="8dp"
-          android:layout_marginEnd="8dp"
-          android:ellipsize="end"
-          android:fontFamily="sans-serif"
-          android:gravity="start"
-          android:lines="2"
-          android:text="@{viewModel.completedStory.storyName}"
-          android:textAlignment="viewStart"
-          android:textColor="@color/oppiaPrimaryText"
-          android:textSize="14sp"
-          android:textStyle="bold"
-          app:layout_constraintStart_toStartOf="parent"
-          app:layout_constraintTop_toTopOf="parent" />
-
-        <TextView
-          android:id="@+id/completed_story_topic_name_text_view"
-          android:layout_width="match_parent"
-          android:layout_height="wrap_content"
-          android:layout_marginStart="8dp"
-          android:layout_marginTop="4dp"
-          android:layout_marginEnd="8dp"
-          android:ellipsize="end"
-          android:fontFamily="sans-serif-light"
-          android:lines="1"
-          android:paddingBottom="12dp"
-          android:text="@{viewModel.completedStory.topicName}"
-          android:textAlignment="viewStart"
-          android:textAllCaps="true"
-          android:textColor="@color/oppiaStrokeBlack"
-          android:textSize="14sp"
-          app:layout_constraintStart_toStartOf="parent"
-          app:layout_constraintTop_toBottomOf="@+id/completed_story_name_text_view" />
-      </androidx.constraintlayout.widget.ConstraintLayout>
-    </androidx.constraintlayout.widget.ConstraintLayout>
-  </com.google.android.material.card.MaterialCardView>
-</layout>
diff --git a/app/src/main/res/layout-sw600dp-port/completed_story_list_fragment.xml b/app/src/main/res/layout-sw600dp-port/completed_story_list_fragment.xml
deleted file mode 100644
index 3cb5a1f29ba..00000000000
--- a/app/src/main/res/layout-sw600dp-port/completed_story_list_fragment.xml
+++ /dev/null
@@ -1,69 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layout xmlns:android="http://schemas.android.com/apk/res/android"
-  xmlns:app="http://schemas.android.com/apk/res-auto">
-
-  <data>
-
-    <variable
-      name="viewModel"
-      type="org.oppia.android.app.completedstorylist.CompletedStoryListViewModel" />
-  </data>
-
-  <androidx.constraintlayout.widget.ConstraintLayout
-    android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:background="@color/white">
-
-    <com.google.android.material.appbar.AppBarLayout
-      android:id="@+id/completed_story_list_app_bar_layout"
-      android:layout_width="0dp"
-      android:layout_height="wrap_content"
-      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
-      app:layout_constraintEnd_toEndOf="parent"
-      app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toTopOf="parent">
-
-      <androidx.appcompat.widget.Toolbar
-        android:id="@+id/completed_story_list_toolbar"
-        android:layout_width="match_parent"
-        android:layout_height="?attr/actionBarSize"
-        android:background="?attr/colorPrimary"
-        android:fontFamily="sans-serif"
-        android:minHeight="?attr/actionBarSize"
-        app:titleTextAppearance="@style/ToolbarTextAppearance"
-        app:navigationContentDescription="@string/navigate_up"
-        app:navigationIcon="?attr/homeAsUpIndicator"
-        app:title="@string/completed_story_list_activity_title"
-        app:titleTextColor="@color/white" />
-    </com.google.android.material.appbar.AppBarLayout>
-
-    <FrameLayout
-      android:layout_width="0dp"
-      android:layout_height="0dp"
-      app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintEnd_toEndOf="parent"
-      app:layout_constraintStart_toStartOf="parent"
-      app:layout_constraintTop_toBottomOf="@id/completed_story_list_app_bar_layout">
-
-      <androidx.recyclerview.widget.RecyclerView
-        android:id="@+id/completed_story_list"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent"
-        android:clipToPadding="false"
-        android:overScrollMode="never"
-        android:paddingStart="96dp"
-        android:paddingTop="12dp"
-        android:paddingEnd="96dp"
-        android:paddingBottom="112dp"
-        android:scrollbars="none"
-        android:tag="@string/completed_story_list_recyclerview_tag"
-        app:data="@{viewModel.completedStoryListLiveData}" />
-
-      <View
-        android:id="@+id/completed_story_list_shadow_view"
-        android:layout_width="match_parent"
-        android:layout_height="6dp"
-        android:background="@drawable/toolbar_drop_shadow" />
-    </FrameLayout>
-  </androidx.constraintlayout.widget.ConstraintLayout>
-</layout>
diff --git a/app/src/main/res/layout/completed_story_item.xml b/app/src/main/res/layout/completed_story_item.xml
index f5d0042edf6..c1e234fe6b7 100755
--- a/app/src/main/res/layout/completed_story_item.xml
+++ b/app/src/main/res/layout/completed_story_item.xml
@@ -15,10 +15,10 @@
     android:id="@+id/topic_container"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginStart="8dp"
-    android:layout_marginTop="12dp"
-    android:layout_marginEnd="8dp"
-    android:layout_marginBottom="12dp"
+    android:layout_marginStart="@dimen/completed_story_item_topic_container_margin_start"
+    android:layout_marginTop="@dimen/completed_story_item_topic_container_margin_top"
+    android:layout_marginEnd="@dimen/completed_story_item_topic_container_margin_end"
+    android:layout_marginBottom="@dimen/completed_story_item_topic_container_margin_bottom"
     android:clickable="true"
     android:focusable="true"
     android:onClick="@{(v) -> viewModel.onCompletedStoryItemClicked()}"
@@ -35,13 +35,15 @@
         android:layout_height="0dp"
         android:contentDescription="@{viewModel.completedStory.storyName}"
         android:importantForAccessibility="no"
+        android:scaleType="centerInside"
         app:entityId="@{viewModel.completedStory.storyId}"
         app:entityType="@{viewModel.entityType}"
         app:layout_constraintDimensionRatio="4:3"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
-        app:lessonThumbnail="@{viewModel.completedStory.lessonThumbnail}" />
+        app:lessonThumbnail="@{viewModel.completedStory.lessonThumbnail}"
+        app:topRoundedRectDrawableWithColor="@{viewModel.completedStory.lessonThumbnail.backgroundColorRgb}" />
 
       <androidx.constraintlayout.widget.ConstraintLayout
         android:id="@+id/constraintLayout"
diff --git a/app/src/main/res/layout/completed_story_list_fragment.xml b/app/src/main/res/layout/completed_story_list_fragment.xml
index 23fab1bf8d3..ce6a1b3a677 100644
--- a/app/src/main/res/layout/completed_story_list_fragment.xml
+++ b/app/src/main/res/layout/completed_story_list_fragment.xml
@@ -51,10 +51,10 @@
         android:layout_height="match_parent"
         android:clipToPadding="false"
         android:overScrollMode="never"
-        android:paddingStart="20dp"
-        android:paddingTop="20dp"
-        android:paddingEnd="20dp"
-        android:paddingBottom="144dp"
+        android:paddingStart="@dimen/completed_story_list_fragment_recyclerview_padding_start"
+        android:paddingTop="@dimen/completed_story_list_fragment_recyclerview_padding_top"
+        android:paddingEnd="@dimen/completed_story_list_fragment_recyclerview_padding_end"
+        android:paddingBottom="@dimen/completed_story_list_fragment_recyclerview_padding_bottom"
         android:scrollbars="none"
         android:tag="@string/completed_story_list_recyclerview_tag"
         app:data="@{viewModel.completedStoryListLiveData}" />
diff --git a/app/src/main/res/values-land/dimens.xml b/app/src/main/res/values-land/dimens.xml
index a8aaad59435..4b51ff326bb 100644
--- a/app/src/main/res/values-land/dimens.xml
+++ b/app/src/main/res/values-land/dimens.xml
@@ -270,6 +270,18 @@
   <dimen name="coming_soon_topic_promoted_list_view_padding_start">0dp</dimen>
   <dimen name="coming_soon_topic_Promoted_list_view_padding_end">0dp</dimen>
 
+  <!-- Completed Story Item -->
+  <dimen name="completed_story_item_topic_container_margin_start">16dp</dimen>
+  <dimen name="completed_story_item_topic_container_margin_end">16dp</dimen>
+  <dimen name="completed_story_item_topic_container_margin_top">12dp</dimen>
+  <dimen name="completed_story_item_topic_container_margin_bottom">12dp</dimen>
+
+  <!-- Completed Story list Fragment -->
+  <dimen name="completed_story_list_fragment_recyclerview_padding_start">56dp</dimen>
+  <dimen name="completed_story_list_fragment_recyclerview_padding_top">28dp</dimen>
+  <dimen name="completed_story_list_fragment_recyclerview_padding_end">56dp</dimen>
+  <dimen name="completed_story_list_fragment_recyclerview_padding_bottom">88dp</dimen>
+
   <!-- App Version -->
   <dimen name="app_version_text_view_padding_start">36dp</dimen>
   <dimen name="app_version_text_view_padding_end">36dp</dimen>
diff --git a/app/src/main/res/values-sw600dp-land/dimens.xml b/app/src/main/res/values-sw600dp-land/dimens.xml
index 7a2a6317a7d..f15655f2f9f 100644
--- a/app/src/main/res/values-sw600dp-land/dimens.xml
+++ b/app/src/main/res/values-sw600dp-land/dimens.xml
@@ -295,6 +295,18 @@
   <dimen name="topic_practice_footer_view_margin_top">24dp</dimen>
   <dimen name="topic_practice_footer_view_margin_bottom">0dp</dimen>
 
+  <!-- Completed Story Item -->
+  <dimen name="completed_story_item_topic_container_margin_start">32dp</dimen>
+  <dimen name="completed_story_item_topic_container_margin_end">24dp</dimen>
+  <dimen name="completed_story_item_topic_container_margin_top">32dp</dimen>
+  <dimen name="completed_story_item_topic_container_margin_bottom">0dp</dimen>
+
+  <!-- Completed Story list Fragment -->
+  <dimen name="completed_story_list_fragment_recyclerview_padding_start">64dp</dimen>
+  <dimen name="completed_story_list_fragment_recyclerview_padding_top">24dp</dimen>
+  <dimen name="completed_story_list_fragment_recyclerview_padding_end">64dp</dimen>
+  <dimen name="completed_story_list_fragment_recyclerview_padding_bottom">112dp</dimen>
+  
   <!-- App Version -->
   <dimen name="app_version_text_view_padding_start">16dp</dimen>
   <dimen name="app_version_text_view_padding_end">16dp</dimen>
diff --git a/app/src/main/res/values-sw600dp-port/dimens.xml b/app/src/main/res/values-sw600dp-port/dimens.xml
index 5f2d189b885..d2f9881d062 100644
--- a/app/src/main/res/values-sw600dp-port/dimens.xml
+++ b/app/src/main/res/values-sw600dp-port/dimens.xml
@@ -303,6 +303,18 @@
   <dimen name="app_version_image_view_margin_start">24dp</dimen>
   <dimen name="app_version_text_view_margin_end">28dp</dimen>
 
+  <!-- Completed Story Item -->
+  <dimen name="completed_story_item_topic_container_margin_start">24dp</dimen>
+  <dimen name="completed_story_item_topic_container_margin_end">24dp</dimen>
+  <dimen name="completed_story_item_topic_container_margin_top">36dp</dimen>
+  <dimen name="completed_story_item_topic_container_margin_bottom">0dp</dimen>
+
+  <!-- Completed Story list Fragment -->
+  <dimen name="completed_story_list_fragment_recyclerview_padding_start">96dp</dimen>
+  <dimen name="completed_story_list_fragment_recyclerview_padding_top">12dp</dimen>
+  <dimen name="completed_story_list_fragment_recyclerview_padding_end">96dp</dimen>
+  <dimen name="completed_story_list_fragment_recyclerview_padding_bottom">112dp</dimen>
+
   <!-- Add Profile -->
   <dimen name="add_profile_container_width">360dp</dimen>
   <dimen name="add_profile_main_padding_top">52dp</dimen>
@@ -312,4 +324,5 @@
 
   <dimen name="home_fragment_padding_top">48dp</dimen>
   <dimen name="home_fragment_padding_bottom">100dp</dimen>
+  
 </resources>
diff --git a/app/src/main/res/values/dimens.xml b/app/src/main/res/values/dimens.xml
index 5be488d6e0c..0be5019b680 100644
--- a/app/src/main/res/values/dimens.xml
+++ b/app/src/main/res/values/dimens.xml
@@ -458,6 +458,18 @@
   <dimen name="topic_practice_footer_view_margin_top">36dp</dimen>
   <dimen name="topic_practice_footer_view_margin_bottom">108dp</dimen>
 
+  <!-- Completed Story Item -->
+  <dimen name="completed_story_item_topic_container_margin_start">8dp</dimen>
+  <dimen name="completed_story_item_topic_container_margin_end">8dp</dimen>
+  <dimen name="completed_story_item_topic_container_margin_top">12dp</dimen>
+  <dimen name="completed_story_item_topic_container_margin_bottom">12dp</dimen>
+
+  <!-- Completed Story list Fragment -->
+  <dimen name="completed_story_list_fragment_recyclerview_padding_start">20dp</dimen>
+  <dimen name="completed_story_list_fragment_recyclerview_padding_top">20dp</dimen>
+  <dimen name="completed_story_list_fragment_recyclerview_padding_end">20dp</dimen>
+  <dimen name="completed_story_list_fragment_recyclerview_padding_bottom">144dp</dimen>
+
   <!-- App Version -->
   <dimen name="app_version_text_view_padding_start">16dp</dimen>
   <dimen name="app_version_text_view_padding_end">16dp</dimen>