Responsive UI improvements (#41)

* Improved responsive UX for media profiles

* Improved responsiveness for other pages

* Added docs; fixed up stragglers

lib/pinchflat_web/components/custom_components/button_components.ex

@@ -23,7 +23,7 @@ defmodule PinchflatWeb.CustomComponents.ButtonComponents do
     <button
       class={[
         "text-center font-medium text-white",
-        "#{@rounding} inline-flex items-center justify-center px-10 py-4",
+        "#{@rounding} inline-flex items-center justify-center px-8 py-4",
         "#{@color}",
         "hover:bg-opacity-90 lg:px-8 xl:px-10",
         @class

lib/pinchflat_web/components/custom_components/text_components.ex

@@ -2,6 +2,8 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
   @moduledoc false
   use Phoenix.Component
 
+  alias PinchflatWeb.CoreComponents
+
   @doc """
   Renders a code block with the given content.
   """
@@ -28,4 +30,19 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
     </.link>
     """
   end
+
+  @doc """
+  Renders an icon as a link with the given href.
+  """
+  attr :href, :string, required: true
+  attr :icon, :string, required: true
+  attr :class, :string, default: ""
+
+  def icon_link(assigns) do
+    ~H"""
+    <.link href={@href} class={["hover:text-secondary duration-200 ease-in-out", @class]}>
+      <CoreComponents.icon name={@icon} />
+    </.link>
+    """
+  end
 end