Merge pull request #9980 from circleci/DOCSS-1908-mobile-cta-styling

update mobile CTA button styling

Author: rosieyohannan

ui/src/partials/arrow-back-icon.hbs

@@ -0,0 +1,3 @@
+<svg width="{{#if width}}{{width}}{{else}}16{{/if}}" height="{{#if height}}{{height}}{{else}}12{{/if}}" viewBox="0 0 16 12" {{#if class}}class="{{class}}"{{/if}} fill="none" xmlns="http://www.w3.org/2000/svg"{{#if ariaLabel}} aria-label="{{ariaLabel}}"{{/if}}>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.292893 5.29289C-0.0976311 5.68342 -0.0976311 6.31658 0.292893 6.70711L5.29289 11.7071C5.68342 12.0976 6.31658 12.0976 6.70711 11.7071C7.09763 11.3166 7.09763 10.6834 6.70711 10.2929L3.41421 7H15C15.5523 7 16 6.55228 16 6C16 5.44772 15.5523 5 15 5H3.41421L6.70711 1.70711C7.09763 1.31658 7.09763 0.683417 6.70711 0.292894C6.31658 -0.0976312 5.68342 -0.0976312 5.29289 0.292894L0.292893 5.29289Z" fill="currentColor"/>
+</svg>

ui/src/partials/navigation.hbs

@@ -10,10 +10,10 @@
     {{> component-explorer-nav class="hidden" options=(components-to-nav-list)}}
     <div class="flex flex-col space-between">
       {{> left-side-nav}}
-      <a href="https://app.circleci.com/" class="fslex items-center mt-4 ml-2 gap-2 font-medium md:hidden bg-white" >
+      <a href="https://app.circleci.com/" class="flex items-center mt-4 ml-2 gap-2 font-medium md:hidden bg-white" >
         Go to Application
-        <div class="inline-flex h-[24px] w-[24px] bg-accent-green rounded items-center justify-center">
-          <img src="{{{uiRootPath}}}/img/arrow-back.svg" alt="Go to Application" class="rotate-180 w-[13px] h-[13px]">
+        <div class="inline-flex h-[24px] w-[24px] rounded items-center justify-center bg-slime-green border border-accent-green text-dark-green">
+          {{> arrow-back-icon class="rotate-180" width="13" height="13" ariaLabel="Go to Application"}}
         </div>
       </a>
     </div>