From 59d67e974f3c1024f05e3528a4afcd5ff655d8c6 Mon Sep 17 00:00:00 2001
From: indirectlylit <devon@indirectlylit.com>
Date: Thu, 28 Jul 2016 10:19:04 -0700
Subject: [PATCH 1/6] migrate svgs to inline, css style-able

---
 .../assets/src/vue/content-icon/index.vue     | 41 ++++++++++++++++---
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue b/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
index 1261559aa5b..507bec9b559 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
@@ -1,6 +1,36 @@
 <template>
 
-  <img :src="src" :alt="altText">
+  <div>
+    <!-- complete -->
+    <svg v-if="thisIs('complete', 'audio')" src="./content-icons/complete-audio.svg" :title="altText">
+    </svg>
+    <svg v-if="thisIs('complete', 'document')" src="./content-icons/complete-document.svg" :title="altText">
+    </svg>
+    <svg v-if="thisIs('complete', 'exercise')" src="./content-icons/complete-exercise.svg" :title="altText">
+    </svg>
+    <svg v-if="thisIs('complete', 'video')" src="./content-icons/complete-video.svg" :title="altText">
+    </svg>
+
+    <!-- partial -->
+    <svg v-if="thisIs('partial', 'audio')" src="./content-icons/partial-audio.svg" :title="altText">
+    </svg>
+    <svg v-if="thisIs('partial', 'document')" src="./content-icons/partial-document.svg" :title="altText">
+    </svg>
+    <svg v-if="thisIs('partial', 'exercise')" src="./content-icons/partial-exercise.svg" :title="altText">
+    </svg>
+    <svg v-if="thisIs('partial', 'video')" src="./content-icons/partial-video.svg" :title="altText">
+    </svg>
+
+    <!-- unstarted -->
+    <svg v-if="thisIs('unstarted', 'audio')" src="./content-icons/unstarted-audio.svg" :title="altText">
+    </svg>
+    <svg v-if="thisIs('unstarted', 'document')" src="./content-icons/unstarted-document.svg" :title="altText">
+    </svg>
+    <svg v-if="thisIs('unstarted', 'exercise')" src="./content-icons/unstarted-exercise.svg" :title="altText">
+    </svg>
+    <svg v-if="thisIs('unstarted', 'video')" src="./content-icons/unstarted-video.svg" :title="altText">
+    </svg>
+  </div>
 
 </template>
 
@@ -23,11 +53,10 @@
         // TODO - I18N
         return `${this.progress} - ${this.kind}`;
       },
-      src() {
-        // Note: dynamic requires should be used carefully because
-        //  they greedily add items to the webpack bundle.
-        // See https://webpack.github.io/docs/context.html
-        return require(`./content-icons/${this.progress}-${this.kind}.svg`);
+    },
+    methods: {
+      thisIs(progress, kind) {
+        return this.progress === progress && this.kind === kind;
       },
     },
   };

From f6867a520a4c581461db9f2f384c4b7d7e55eae2 Mon Sep 17 00:00:00 2001
From: indirectlylit <devon@indirectlylit.com>
Date: Thu, 28 Jul 2016 10:24:26 -0700
Subject: [PATCH 2/6] add validation to content-icon component

---
 .../plugins/learn/assets/src/vue/content-icon/index.vue  | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue b/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
index 507bec9b559..19a2b6531c4 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
@@ -37,15 +37,24 @@
 
 <script>
 
+  const PROGRESS_STATES = ['complete', 'partial', 'unstarted'];
+  const KINDS = ['audio', 'document', 'video']; // not 'exercise' for now
+
   module.exports = {
     props: {
       progress: {
         type: String,
         default: 'unstarted',
+        validator(value) {
+          return PROGRESS_STATES.indexOf(value) !== -1;
+        },
       },
       kind: {
         type: String,
         required: true,
+        validator(value) {
+          return KINDS.indexOf(value) !== -1;
+        },
       },
     },
     computed: {

From bdd5cb0562f2ed517aba6b0929657169f47be3f7 Mon Sep 17 00:00:00 2001
From: indirectlylit <devon@indirectlylit.com>
Date: Thu, 28 Jul 2016 10:47:03 -0700
Subject: [PATCH 3/6] =?UTF-8?q?give=20the=20content-icon=20component=20an?=
 =?UTF-8?q?=20=E2=80=98ispageicon=E2=80=99=20prop?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 kolibri/core/assets/src/core-global.styl      |  3 --
 .../assets/src/vue/content-icon/index.vue     | 42 +++++++++++++------
 .../assets/src/vue/content-page/index.vue     |  3 +-
 .../plugins/learn/assets/src/vue/learn.styl   |  4 ++
 4 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/kolibri/core/assets/src/core-global.styl b/kolibri/core/assets/src/core-global.styl
index 7e5553a3609..d1f785f06ad 100644
--- a/kolibri/core/assets/src/core-global.styl
+++ b/kolibri/core/assets/src/core-global.styl
@@ -62,9 +62,6 @@ img
 svg:not(:root)
   overflow: hidden
 
-.pageicon
-  fill: $core-text-default
-
 button
   // structure (from https://github.com/yahoo/pure/blob/master/src/buttons/css/buttons-core.css)
   display: inline-block
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue b/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
index 19a2b6531c4..83f697325e4 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
@@ -2,33 +2,33 @@
 
   <div>
     <!-- complete -->
-    <svg v-if="thisIs('complete', 'audio')" src="./content-icons/complete-audio.svg" :title="altText">
+    <svg v-if="thisIs('complete', 'audio')" src="./content-icons/complete-audio.svg" :class="{pageicon: ispageicon}" :title="altText">
     </svg>
-    <svg v-if="thisIs('complete', 'document')" src="./content-icons/complete-document.svg" :title="altText">
+    <svg v-if="thisIs('complete', 'document')" src="./content-icons/complete-document.svg" :class="{pageicon: ispageicon}" :title="altText">
     </svg>
-    <svg v-if="thisIs('complete', 'exercise')" src="./content-icons/complete-exercise.svg" :title="altText">
+    <svg v-if="thisIs('complete', 'exercise')" src="./content-icons/complete-exercise.svg" :class="{pageicon: ispageicon}" :title="altText">
     </svg>
-    <svg v-if="thisIs('complete', 'video')" src="./content-icons/complete-video.svg" :title="altText">
+    <svg v-if="thisIs('complete', 'video')" src="./content-icons/complete-video.svg" :class="{pageicon: ispageicon}" :title="altText">
     </svg>
 
     <!-- partial -->
-    <svg v-if="thisIs('partial', 'audio')" src="./content-icons/partial-audio.svg" :title="altText">
+    <svg v-if="thisIs('partial', 'audio')" src="./content-icons/partial-audio.svg" :class="{pageicon: ispageicon}" :title="altText">
     </svg>
-    <svg v-if="thisIs('partial', 'document')" src="./content-icons/partial-document.svg" :title="altText">
+    <svg v-if="thisIs('partial', 'document')" src="./content-icons/partial-document.svg" :class="{pageicon: ispageicon}" :title="altText">
     </svg>
-    <svg v-if="thisIs('partial', 'exercise')" src="./content-icons/partial-exercise.svg" :title="altText">
+    <svg v-if="thisIs('partial', 'exercise')" src="./content-icons/partial-exercise.svg" :class="{pageicon: ispageicon}" :title="altText">
     </svg>
-    <svg v-if="thisIs('partial', 'video')" src="./content-icons/partial-video.svg" :title="altText">
+    <svg v-if="thisIs('partial', 'video')" src="./content-icons/partial-video.svg" :class="{pageicon: ispageicon}" :title="altText">
     </svg>
 
     <!-- unstarted -->
-    <svg v-if="thisIs('unstarted', 'audio')" src="./content-icons/unstarted-audio.svg" :title="altText">
+    <svg v-if="thisIs('unstarted', 'audio')" src="./content-icons/unstarted-audio.svg" :class="{pageicon: ispageicon}" :title="altText">
     </svg>
-    <svg v-if="thisIs('unstarted', 'document')" src="./content-icons/unstarted-document.svg" :title="altText">
+    <svg v-if="thisIs('unstarted', 'document')" src="./content-icons/unstarted-document.svg" :class="{pageicon: ispageicon}" :title="altText">
     </svg>
-    <svg v-if="thisIs('unstarted', 'exercise')" src="./content-icons/unstarted-exercise.svg" :title="altText">
+    <svg v-if="thisIs('unstarted', 'exercise')" src="./content-icons/unstarted-exercise.svg" :class="{pageicon: ispageicon}" :title="altText">
     </svg>
-    <svg v-if="thisIs('unstarted', 'video')" src="./content-icons/unstarted-video.svg" :title="altText">
+    <svg v-if="thisIs('unstarted', 'video')" src="./content-icons/unstarted-video.svg" :class="{pageicon: ispageicon}" :title="altText">
     </svg>
   </div>
 
@@ -42,6 +42,10 @@
 
   module.exports = {
     props: {
+      ispageicon: {
+        type: Boolean,
+        default: false,
+      },
       progress: {
         type: String,
         default: 'unstarted',
@@ -73,4 +77,16 @@
 </script>
 
 
-<style lang="stylus" scoped></style>
+<style lang="stylus" scoped>
+
+  @require '~core-theme.styl'
+
+  // replace the correct path
+  .pageicon path[fill='#996189']
+    fill: $core-text-default
+
+  // a bit smaller
+  .pageicon
+    height: 96%
+
+</style>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-page/index.vue b/kolibri/plugins/learn/assets/src/vue/content-page/index.vue
index 70ca5d20f2a..4550303f7c5 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-page/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/content-page/index.vue
@@ -14,6 +14,7 @@
       </a>
       <content-icon
         slot='icon'
+        :ispageicon="true"
         :kind="kind"
         :progress="progress">
       </content-icon>
@@ -96,7 +97,7 @@
   .content-container
     height: 60vh
     margin-bottom: 1em
-    
+
   #little-arrow
     font-size: 28px
     font-weight: 900
diff --git a/kolibri/plugins/learn/assets/src/vue/learn.styl b/kolibri/plugins/learn/assets/src/vue/learn.styl
index 2b67950a9f9..bc64baeb6ed 100644
--- a/kolibri/plugins/learn/assets/src/vue/learn.styl
+++ b/kolibri/plugins/learn/assets/src/vue/learn.styl
@@ -28,3 +28,7 @@ width-auto-adjust()
     $grid-width = grid-width($n-cols)
     @media (min-width: breakpoint($grid-width))
       width: $grid-width
+
+.pageicon
+  fill: $core-text-default
+

From 66c0d3c15061a5a7712c5da5707353f2699e4766 Mon Sep 17 00:00:00 2001
From: indirectlylit <devon@indirectlylit.com>
Date: Thu, 28 Jul 2016 11:27:17 -0700
Subject: [PATCH 4/6] fix up color selection

---
 .../src/vue/content-icon/content-icons/complete-audio.svg   | 2 +-
 .../vue/content-icon/content-icons/complete-document.svg    | 2 +-
 .../vue/content-icon/content-icons/complete-exercise.svg    | 4 ++--
 .../src/vue/content-icon/content-icons/complete-video.svg   | 4 ++--
 .../src/vue/content-icon/content-icons/partial-audio.svg    | 2 +-
 .../src/vue/content-icon/content-icons/partial-document.svg | 2 +-
 .../src/vue/content-icon/content-icons/partial-exercise.svg | 6 +++---
 .../src/vue/content-icon/content-icons/partial-video.svg    | 6 +++---
 .../src/vue/content-icon/content-icons/unstarted-audio.svg  | 2 +-
 .../vue/content-icon/content-icons/unstarted-document.svg   | 2 +-
 .../vue/content-icon/content-icons/unstarted-exercise.svg   | 4 ++--
 .../src/vue/content-icon/content-icons/unstarted-video.svg  | 4 ++--
 kolibri/plugins/learn/assets/src/vue/content-icon/index.vue | 2 +-
 13 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-audio.svg b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-audio.svg
index b581fd5bac9..0baa336ce17 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-audio.svg
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-audio.svg
@@ -7,4 +7,4 @@
             <path d="M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z M8,12.6054732 L8,17.3945268 L11.1927024,17.3945268 L15.1835804,21.3854048 L15.1835804,8.61459521 L11.1927024,12.6054732 L8,12.6054732 Z M18.7753706,15 C18.7753706,13.5872292 17.9612315,12.3740023 16.7799316,11.7833523 L16.7799316,18.2086659 C17.9612315,17.6259977 18.7753706,16.4127708 18.7753706,15 Z M16.7799316,8 L16.7799316,9.64424173 C19.0866591,10.3306727 20.7708096,12.4697834 20.7708096,15 C20.7708096,17.5302166 19.0866591,19.6693273 16.7799316,20.3557583 L16.7799316,22 C19.9806157,21.2736602 22.3671608,18.4161916 22.3671608,15 C22.3671608,11.5838084 19.9806157,8.72633979 16.7799316,8 Z" id="Combined-Shape" fill="#996189"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-document.svg b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-document.svg
index 107d3542f00..86d55c6ad0a 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-document.svg
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-document.svg
@@ -7,4 +7,4 @@
             <path d="M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z M10.5357666,8 C9.69109497,8 9,8.74868622 9,9.66374715 L9,20.3386943 C9,21.2537552 9.69109497,22.0024414 10.5357666,22.0024414 L19.4820557,22.0024417 C20.3267273,22.0024417 21.0178223,21.2537555 21.0178223,20.3386946 L21.0178223,9.66374747 C21.0178223,8.74868654 20.3267273,8.00000032 19.4820557,8.00000032 L10.5357666,8 Z M19,12 L11,12 L11,10 L19,10 L19,12 Z M19,19.7617792 L14,19.7617792 L14,18 L19,18 L19,19.7617792 Z M19,16 L11,16 L11,14 L19,14 L19,16 Z" id="Combined-Shape" fill="#996189"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-exercise.svg b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-exercise.svg
index 4a6df7c025d..1c45d505721 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-exercise.svg
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-exercise.svg
@@ -4,7 +4,7 @@
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="content-icon-/filled-/exercise">
             <path d="M15,30 C23.2842712,30 30,23.2842712 30,15 C30,6.71572875 23.2842712,3.55271368e-15 15,3.55271368e-15 C6.71572875,3.55271368e-15 0,6.71572875 0,15 C0,23.2842712 6.71572875,30 15,30 Z" id="Oval-1" fill="#FFFFFF"></path>
-            <path d="M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z M15,18.689 L19.326,21.3 L18.178,16.379 L22,13.068 L16.967,12.641 L15,8 L13.033,12.641 L8,13.068 L11.822,16.379 L10.674,21.3 L15,18.689 Z" id="Combined-Shape" fill="#996192"></path>
+            <path d="M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z M15,18.689 L19.326,21.3 L18.178,16.379 L22,13.068 L16.967,12.641 L15,8 L13.033,12.641 L8,13.068 L11.822,16.379 L10.674,21.3 L15,18.689 Z" id="Combined-Shape" fill="#996189"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-video.svg b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-video.svg
index 301e5ab3214..5bad3d843e6 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-video.svg
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/complete-video.svg
@@ -4,7 +4,7 @@
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="content-icon-/filled-/video">
             <path d="M15,30 C23.2842712,30 30,23.2842712 30,15 C30,6.71572875 23.2842712,-3.55271368e-15 15,-3.55271368e-15 C6.71572875,-3.55271368e-15 0,6.71572875 0,15 C0,23.2842712 6.71572875,30 15,30 Z" id="Oval-1" fill="#FFFFFF"></path>
-            <path d="M12,22 L21.3333333,15 L12,8 L12,22 L12,22 Z M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z" id="Shape" fill="#996192"></path>
+            <path d="M12,22 L21.3333333,15 L12,8 L12,22 L12,22 Z M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z" id="Shape" fill="#996189"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-audio.svg b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-audio.svg
index 96336732a3a..f0c0d4558f3 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-audio.svg
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-audio.svg
@@ -8,4 +8,4 @@
             <path d="M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z M15,4 C8.928,4 4,8.928 4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 C26,8.928 21.072,4 15,4 Z M8,12.6054732 L8,17.3945268 L11.1927024,17.3945268 L15.1835804,21.3854048 L15.1835804,8.61459521 L11.1927024,12.6054732 L8,12.6054732 Z M18.7753706,15 C18.7753706,13.5872292 17.9612315,12.3740023 16.7799316,11.7833523 L16.7799316,18.2086659 C17.9612315,17.6259977 18.7753706,16.4127708 18.7753706,15 Z M16.7799316,8 L16.7799316,9.64424173 C19.0866591,10.3306727 20.7708096,12.4697834 20.7708096,15 C20.7708096,17.5302166 19.0866591,19.6693273 16.7799316,20.3557583 L16.7799316,22 C19.9806157,21.2736602 22.3671608,18.4161916 22.3671608,15 C22.3671608,11.5838084 19.9806157,8.72633979 16.7799316,8 Z" id="Combined-Shape" fill="#996189"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-document.svg b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-document.svg
index 2824b0942df..8fa9c8b3b3f 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-document.svg
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-document.svg
@@ -8,4 +8,4 @@
             <path d="M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z M15,4 C8.928,4 4,8.928 4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 C26,8.928 21.072,4 15,4 Z M10.5357666,8 C9.69109497,8 9,8.74868622 9,9.66374715 L9,20.3386943 C9,21.2537552 9.69109497,22.0024414 10.5357666,22.0024414 L19.4820557,22.0024417 C20.3267273,22.0024417 21.0178223,21.2537555 21.0178223,20.3386946 L21.0178223,9.66374747 C21.0178223,8.74868654 20.3267273,8.00000032 19.4820557,8.00000032 L10.5357666,8 Z M19,12 L11,12 L11,10 L19,10 L19,12 Z M19,19.7617792 L14,19.7617792 L14,18 L19,18 L19,19.7617792 Z M19,16 L11,16 L11,14 L19,14 L19,16 Z" id="Combined-Shape" fill="#996189"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-exercise.svg b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-exercise.svg
index fdb0fafaf58..695c8798c0b 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-exercise.svg
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-exercise.svg
@@ -4,8 +4,8 @@
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="content-icon-/half-/exercise">
             <path d="M15,30 C23.2842712,30 30,23.2842712 30,15 C30,6.71572875 23.2842712,3.55271368e-15 15,3.55271368e-15 C6.71572875,3.55271368e-15 0,6.71572875 0,15 C0,23.2842712 6.71572875,30 15,30 Z" id="Oval-1" fill="#FFFFFF"></path>
-            <path d="M4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 L4,15 Z" id="Combined-Shape" fill="#E2D1E0"></path>
-            <path d="M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z M15,4 C8.928,4 4,8.928 4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 C26,8.928 21.072,4 15,4 Z M15,18.689 L19.326,21.3 L18.178,16.379 L22,13.068 L16.967,12.641 L15,8 L13.033,12.641 L8,13.068 L11.822,16.379 L10.674,21.3 L15,18.689 Z" id="Combined-Shape" fill="#996192"></path>
+            <path d="M4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 L4,15 Z" id="Combined-Shape" fill="#996189"></path>
+            <path d="M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z M15,4 C8.928,4 4,8.928 4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 C26,8.928 21.072,4 15,4 Z M15,18.689 L19.326,21.3 L18.178,16.379 L22,13.068 L16.967,12.641 L15,8 L13.033,12.641 L8,13.068 L11.822,16.379 L10.674,21.3 L15,18.689 Z" id="Combined-Shape" fill="#996189"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-video.svg b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-video.svg
index 2825d8aec04..e06d6720abe 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-video.svg
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/partial-video.svg
@@ -5,8 +5,8 @@
         <g id="content-icon-/half-/video">
             <path d="M15,30 C23.2842712,30 30,23.2842712 30,15 C30,6.71572875 23.2842712,-3.55271368e-15 15,-3.55271368e-15 C6.71572875,-3.55271368e-15 0,6.71572875 0,15 C0,23.2842712 6.71572875,30 15,30 Z" id="Oval-1" fill="#FFFFFF"></path>
             <path d="M4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 L4,15 Z" id="Combined-Shape" fill="#E2D1E0"></path>
-            <path d="M15,4 C8.928,4 4,8.928 4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 C26,8.928 21.072,4 15,4 L15,4 Z M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z" id="Shape" fill="#996192"></path>
-            <polygon id="Path" fill="#996192" points="12 22 21.3333333 15 12 8"></polygon>
+            <path d="M15,4 C8.928,4 4,8.928 4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 C26,8.928 21.072,4 15,4 L15,4 Z M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z" id="Shape" fill="#996189"></path>
+            <polygon id="Path" fill="#996189" points="12 22 21.3333333 15 12 8"></polygon>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-audio.svg b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-audio.svg
index cccc3bc2f83..c5c0b3b7b41 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-audio.svg
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-audio.svg
@@ -8,4 +8,4 @@
             <path d="M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z M15,4 C8.928,4 4,8.928 4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 C26,8.928 21.072,4 15,4 Z M8,12.6054732 L8,17.3945268 L11.1927024,17.3945268 L15.1835804,21.3854048 L15.1835804,8.61459521 L11.1927024,12.6054732 L8,12.6054732 Z M18.7753706,15 C18.7753706,13.5872292 17.9612315,12.3740023 16.7799316,11.7833523 L16.7799316,18.2086659 C17.9612315,17.6259977 18.7753706,16.4127708 18.7753706,15 Z M16.7799316,8 L16.7799316,9.64424173 C19.0866591,10.3306727 20.7708096,12.4697834 20.7708096,15 C20.7708096,17.5302166 19.0866591,19.6693273 16.7799316,20.3557583 L16.7799316,22 C19.9806157,21.2736602 22.3671608,18.4161916 22.3671608,15 C22.3671608,11.5838084 19.9806157,8.72633979 16.7799316,8 Z" id="Combined-Shape" fill="#996189"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-document.svg b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-document.svg
index 0cf610fa473..60c0a5ac5eb 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-document.svg
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-document.svg
@@ -7,4 +7,4 @@
             <path d="M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z M15,4 C8.928,4 4,8.928 4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 C26,8.928 21.072,4 15,4 Z M10.5357666,8 C9.69109497,8 9,8.74868622 9,9.66374715 L9,20.3386943 C9,21.2537552 9.69109497,22.0024414 10.5357666,22.0024414 L19.4820557,22.0024417 C20.3267273,22.0024417 21.0178223,21.2537555 21.0178223,20.3386946 L21.0178223,9.66374747 C21.0178223,8.74868654 20.3267273,8.00000032 19.4820557,8.00000032 L10.5357666,8 Z M19,12 L11,12 L11,10 L19,10 L19,12 Z M19,19.7617792 L14,19.7617792 L14,18 L19,18 L19,19.7617792 Z M19,16 L11,16 L11,14 L19,14 L19,16 Z" id="Combined-Shape" fill="#996189"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-exercise.svg b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-exercise.svg
index 0472a4db20f..2af70bea993 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-exercise.svg
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-exercise.svg
@@ -5,7 +5,7 @@
         <g id="content-icon-/empty-/exercise">
             <path d="M15,30 C23.2842712,30 30,23.2842712 30,15 C30,6.71572875 23.2842712,3.55271368e-15 15,3.55271368e-15 C6.71572875,3.55271368e-15 0,6.71572875 0,15 C0,23.2842712 6.71572875,30 15,30 Z" id="Oval-1" fill="#FFFFFF"></path>
             <path d="M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z M15,4 C8.928,4 4,8.928 4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 C26,8.928 21.072,4 15,4 Z" id="Combined-Shape" fill="#996189"></path>
-            <polygon id="Shape" fill="#996192" points="15 18.689 19.326 21.3 18.178 16.379 22 13.068 16.967 12.641 15 8 13.033 12.641 8 13.068 11.822 16.379 10.674 21.3"></polygon>
+            <polygon id="Shape" fill="#996189" points="15 18.689 19.326 21.3 18.178 16.379 22 13.068 16.967 12.641 15 8 13.033 12.641 8 13.068 11.822 16.379 10.674 21.3"></polygon>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-video.svg b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-video.svg
index 6b924db8a02..fe6fb0597da 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-video.svg
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/content-icons/unstarted-video.svg
@@ -4,7 +4,7 @@
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="content-icon-/empty-/video">
             <path d="M15,30 C23.2842712,30 30,23.2842712 30,15 C30,6.71572875 23.2842712,-3.55271368e-15 15,-3.55271368e-15 C6.71572875,-3.55271368e-15 0,6.71572875 0,15 C0,23.2842712 6.71572875,30 15,30 Z" id="Oval-1" fill="#FFFFFF"></path>
-            <path d="M12,22 L21.3333333,15 L12,8 L12,22 L12,22 Z M15,4 C8.928,4 4,8.928 4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 C26,8.928 21.072,4 15,4 L15,4 Z M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z" id="Shape" fill="#996192"></path>
+            <path d="M12,22 L21.3333333,15 L12,8 L12,22 L12,22 Z M15,4 C8.928,4 4,8.928 4,15 C4,21.072 8.928,26 15,26 C21.072,26 26,21.072 26,15 C26,8.928 21.072,4 15,4 L15,4 Z M2,15 C2,7.83375 7.83375,2 15,2 C22.16625,2 28,7.83375 28,15 C28,22.16625 22.16625,28 15,28 C7.83375,28 2,22.16625 2,15 Z" id="Shape" fill="#996189"></path>
         </g>
     </g>
-</svg>
\ No newline at end of file
+</svg>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue b/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
index 83f697325e4..f2a7786c9a1 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
@@ -82,7 +82,7 @@
   @require '~core-theme.styl'
 
   // replace the correct path
-  .pageicon path[fill='#996189']
+  .pageicon [fill='#996189']
     fill: $core-text-default
 
   // a bit smaller

From 66ba8333c34d8ce4a77221701e61e681352e9c16 Mon Sep 17 00:00:00 2001
From: indirectlylit <devon@indirectlylit.com>
Date: Thu, 28 Jul 2016 11:27:36 -0700
Subject: [PATCH 5/6] add size as an input

---
 .../assets/src/vue/content-card/index.vue     |  1 +
 .../assets/src/vue/content-icon/index.vue     | 32 +++++++++----------
 .../assets/src/vue/content-page/index.vue     |  1 +
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/vue/content-card/index.vue b/kolibri/plugins/learn/assets/src/vue/content-card/index.vue
index 6f1c6566348..d964781f45d 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-card/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/content-card/index.vue
@@ -6,6 +6,7 @@
         <content-icon
           :class='thumb ? "content-icon" : "content-icon-center" '
           v-if="kind"
+          :size="thumb ? 30 : 60"
           :kind="kind"
           :progress="progress">
         </content-icon>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue b/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
index f2a7786c9a1..3267faa62fc 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
@@ -2,33 +2,33 @@
 
   <div>
     <!-- complete -->
-    <svg v-if="thisIs('complete', 'audio')" src="./content-icons/complete-audio.svg" :class="{pageicon: ispageicon}" :title="altText">
+    <svg v-if="thisIs('complete', 'audio')" src="./content-icons/complete-audio.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
     </svg>
-    <svg v-if="thisIs('complete', 'document')" src="./content-icons/complete-document.svg" :class="{pageicon: ispageicon}" :title="altText">
+    <svg v-if="thisIs('complete', 'document')" src="./content-icons/complete-document.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
     </svg>
-    <svg v-if="thisIs('complete', 'exercise')" src="./content-icons/complete-exercise.svg" :class="{pageicon: ispageicon}" :title="altText">
+    <svg v-if="thisIs('complete', 'exercise')" src="./content-icons/complete-exercise.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
     </svg>
-    <svg v-if="thisIs('complete', 'video')" src="./content-icons/complete-video.svg" :class="{pageicon: ispageicon}" :title="altText">
+    <svg v-if="thisIs('complete', 'video')" src="./content-icons/complete-video.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
     </svg>
 
     <!-- partial -->
-    <svg v-if="thisIs('partial', 'audio')" src="./content-icons/partial-audio.svg" :class="{pageicon: ispageicon}" :title="altText">
+    <svg v-if="thisIs('partial', 'audio')" src="./content-icons/partial-audio.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
     </svg>
-    <svg v-if="thisIs('partial', 'document')" src="./content-icons/partial-document.svg" :class="{pageicon: ispageicon}" :title="altText">
+    <svg v-if="thisIs('partial', 'document')" src="./content-icons/partial-document.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
     </svg>
-    <svg v-if="thisIs('partial', 'exercise')" src="./content-icons/partial-exercise.svg" :class="{pageicon: ispageicon}" :title="altText">
+    <svg v-if="thisIs('partial', 'exercise')" src="./content-icons/partial-exercise.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
     </svg>
-    <svg v-if="thisIs('partial', 'video')" src="./content-icons/partial-video.svg" :class="{pageicon: ispageicon}" :title="altText">
+    <svg v-if="thisIs('partial', 'video')" src="./content-icons/partial-video.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
     </svg>
 
     <!-- unstarted -->
-    <svg v-if="thisIs('unstarted', 'audio')" src="./content-icons/unstarted-audio.svg" :class="{pageicon: ispageicon}" :title="altText">
+    <svg v-if="thisIs('unstarted', 'audio')" src="./content-icons/unstarted-audio.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
     </svg>
-    <svg v-if="thisIs('unstarted', 'document')" src="./content-icons/unstarted-document.svg" :class="{pageicon: ispageicon}" :title="altText">
+    <svg v-if="thisIs('unstarted', 'document')" src="./content-icons/unstarted-document.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
     </svg>
-    <svg v-if="thisIs('unstarted', 'exercise')" src="./content-icons/unstarted-exercise.svg" :class="{pageicon: ispageicon}" :title="altText">
+    <svg v-if="thisIs('unstarted', 'exercise')" src="./content-icons/unstarted-exercise.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
     </svg>
-    <svg v-if="thisIs('unstarted', 'video')" src="./content-icons/unstarted-video.svg" :class="{pageicon: ispageicon}" :title="altText">
+    <svg v-if="thisIs('unstarted', 'video')" src="./content-icons/unstarted-video.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
     </svg>
   </div>
 
@@ -46,6 +46,10 @@
         type: Boolean,
         default: false,
       },
+      size: {
+        type: Number,
+        default: 30,
+      },
       progress: {
         type: String,
         default: 'unstarted',
@@ -85,8 +89,4 @@
   .pageicon [fill='#996189']
     fill: $core-text-default
 
-  // a bit smaller
-  .pageicon
-    height: 96%
-
 </style>
diff --git a/kolibri/plugins/learn/assets/src/vue/content-page/index.vue b/kolibri/plugins/learn/assets/src/vue/content-page/index.vue
index 4550303f7c5..2803272c0c3 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-page/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/content-page/index.vue
@@ -15,6 +15,7 @@
       <content-icon
         slot='icon'
         :ispageicon="true"
+        :size="25"
         :kind="kind"
         :progress="progress">
       </content-icon>

From ac5f139ad4ab629fe00ea02642afa1f58b51ee13 Mon Sep 17 00:00:00 2001
From: indirectlylit <devon@indirectlylit.com>
Date: Thu, 28 Jul 2016 11:32:08 -0700
Subject: [PATCH 6/6] whitespace

---
 .../assets/src/vue/content-icon/index.vue     | 36 +++++++------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue b/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
index 3267faa62fc..edd94a96d62 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/content-icon/index.vue
@@ -2,34 +2,22 @@
 
   <div>
     <!-- complete -->
-    <svg v-if="thisIs('complete', 'audio')" src="./content-icons/complete-audio.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
-    </svg>
-    <svg v-if="thisIs('complete', 'document')" src="./content-icons/complete-document.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
-    </svg>
-    <svg v-if="thisIs('complete', 'exercise')" src="./content-icons/complete-exercise.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
-    </svg>
-    <svg v-if="thisIs('complete', 'video')" src="./content-icons/complete-video.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
-    </svg>
+    <svg v-if="thisIs('complete', 'audio')" src="./content-icons/complete-audio.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('complete', 'document')" src="./content-icons/complete-document.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('complete', 'exercise')" src="./content-icons/complete-exercise.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('complete', 'video')" src="./content-icons/complete-video.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
 
     <!-- partial -->
-    <svg v-if="thisIs('partial', 'audio')" src="./content-icons/partial-audio.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
-    </svg>
-    <svg v-if="thisIs('partial', 'document')" src="./content-icons/partial-document.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
-    </svg>
-    <svg v-if="thisIs('partial', 'exercise')" src="./content-icons/partial-exercise.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
-    </svg>
-    <svg v-if="thisIs('partial', 'video')" src="./content-icons/partial-video.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
-    </svg>
+    <svg v-if="thisIs('partial', 'audio')" src="./content-icons/partial-audio.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('partial', 'document')" src="./content-icons/partial-document.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('partial', 'exercise')" src="./content-icons/partial-exercise.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('partial', 'video')" src="./content-icons/partial-video.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
 
     <!-- unstarted -->
-    <svg v-if="thisIs('unstarted', 'audio')" src="./content-icons/unstarted-audio.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
-    </svg>
-    <svg v-if="thisIs('unstarted', 'document')" src="./content-icons/unstarted-document.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
-    </svg>
-    <svg v-if="thisIs('unstarted', 'exercise')" src="./content-icons/unstarted-exercise.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
-    </svg>
-    <svg v-if="thisIs('unstarted', 'video')" src="./content-icons/unstarted-video.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size">
-    </svg>
+    <svg v-if="thisIs('unstarted', 'audio')" src="./content-icons/unstarted-audio.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('unstarted', 'document')" src="./content-icons/unstarted-document.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('unstarted', 'exercise')" src="./content-icons/unstarted-exercise.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
+    <svg v-if="thisIs('unstarted', 'video')" src="./content-icons/unstarted-video.svg" :class="{pageicon: ispageicon}" :title="altText" :width="size" :height="size"></svg>
   </div>
 
 </template>