feat: version 1 done?

frontend/src/Pages/Debate/Arguments.elm

@@ -6,12 +6,14 @@ import Config.Helpers.Cards.Types as C
 import Config.Helpers.Converters exposing (toTitleCase)
 import Config.Helpers.Format
     exposing
-        ( paragraphFontSize
+        ( headerFontSizeSmall
+        , paragraphFontSize
         , paragraphSpacing
         )
 import Config.Helpers.Headers.Helpers exposing (..)
 import Config.Helpers.Headers.Records exposing (argumentHeader)
 import Config.Helpers.Headers.Types as R exposing (..)
+import Config.Helpers.ImageFolders as M exposing (..)
 import Config.Helpers.Response
     exposing
         ( pageList
@@ -141,21 +143,119 @@ debateList device =
             [ [ headerMaker (R.Arguments argumentHeader) ]
             , List.map
                 (\argument ->
-                    cardMaker device (C.Argument argument) (contentList argument)
+                    cardMaker device (C.Argument argument) (contentList device argument)
                 )
                 argumentList
             ]
 
 
-contentList : Argument -> List (Element msg)
-contentList argument =
-    [ summaryMakerDesktop argument
-    , strengthBar argument
-    , tableMaker argument
+contentList : Device -> Argument -> List (Element msg)
+contentList device argument =
+    [ row
+        [ width fill
+        , paddingEach
+            { top =
+                case ( device.class, device.orientation ) of
+                    ( Phone, Portrait ) ->
+                        8
+
+                    ( Tablet, Portrait ) ->
+                        8
+
+                    _ ->
+                        0
+            , right = 0
+            , bottom = 0
+            , left = 0
+            }
+        ]
+        [ column [ width fill, spacing 8 ]
+            [ summaryMakerDesktop argument
+            , strengthBar argument
+            ]
+        , case ( device.class, device.orientation ) of
+            ( Phone, Portrait ) ->
+                none
+
+            ( Tablet, Portrait ) ->
+                none
+
+            _ ->
+                argumentImageMaker argument
+        ]
+    , tableMaker device argument
     , desktopFormalizationMaker argument
+    , proofTreeButton argument.proofLink
     ]
 
 
+argumentImageMaker : Argument -> Element msg
+argumentImageMaker argument =
+    el
+        [ alignRight
+        , alignTop
+        , centerY
+        , paddingEach
+            { top = 0
+            , right = 0
+            , bottom = 0
+            , left = 20
+            }
+        ]
+    <|
+        el
+            [ D.rounded 10
+            , D.width 3
+            , D.color colourTheme.backgroundLightGrey
+            , B.color colourTheme.backgroundLightGrey
+            ]
+        <|
+            E.image
+                [ alignRight
+                , alignTop
+                , D.rounded 10
+                , clip
+                , E.width <| px 65
+                , E.height <| px 65
+                ]
+                { src = imagePathMaker M.Argument argument.argumentImage
+                , description = ""
+                }
+
+
+proofTreeButton : String -> Element msg
+proofTreeButton url =
+    newTabLink
+        [ alignTop
+        , alignRight
+        , paddingXY 0 5
+        ]
+        { url = url
+        , label =
+            el
+                [ F.color colourTheme.textLightGrey
+                , B.color colourTheme.textDarkOrange
+                , D.rounded 10
+                , paddingEach
+                    { top = 6
+                    , bottom = 3
+                    , left = 10
+                    , right = 10
+                    }
+                , mouseOver
+                    [ F.color colourTheme.textLightOrange
+                    , B.color colourTheme.textDeepDarkOrange
+                    ]
+                , transitionStyleSlow
+                , headerFontSizeSmall
+                , F.bold
+                ]
+            <|
+                text
+                    "Proof Tree"
+        }
+
+
 infoSpacing =
     E.width <| px 100
 
@@ -165,15 +265,12 @@ propositionMaker =
     column
         [ E.alignTop, E.alignLeft ]
         [ paragraph
-            ([ F.color colourTheme.textLightGrey
-             , paragraphSpacing
-             , paragraphFontSize
-             , F.bold
-             ]
-                ++ [ F.size 18
-                   , infoSpacing
-                   ]
-            )
+            [ F.color colourTheme.textLightGrey
+            , paragraphSpacing
+            , headerFontSizeSmall
+            , F.bold
+            , infoSpacing
+            ]
             [ el
                 [ tooltip
                     "A proposition is a declarative statement that can be evaluated as either true or false, and which serves as the basis for debate."
@@ -432,8 +529,8 @@ getConfidenceTooltip num =
             "Confidence level out of expected range."
 
 
-tableMaker : Argument -> Element msg
-tableMaker argument =
+tableMaker : Device -> Argument -> Element msg
+tableMaker device argument =
     let
         cellPadding : Attribute msg
         cellPadding =
@@ -454,12 +551,22 @@ tableMaker argument =
             ]
           <|
             E.table
-                [ D.rounded 10
-                , D.width 2
-                , D.color colourTheme.textDarkGrey
-                , clip
-                , B.color colourTheme.backgroundSpreadsheet
-                ]
+                ([ D.rounded 10
+                 , D.width 2
+                 , D.color colourTheme.textDarkGrey
+                 , clip
+                 ]
+                    ++ (case ( device.class, device.orientation ) of
+                            ( Phone, Portrait ) ->
+                                [ B.color colourTheme.backgroundSpreadsheet ]
+
+                            ( Tablet, Portrait ) ->
+                                [ B.color colourTheme.backgroundSpreadsheet ]
+
+                            _ ->
+                                []
+                       )
+                )
                 { data = argument.definitionTable
                 , columns =
                     [ { header =